/* index */ .banner { position: relative; } .index-banner-swiper { position: relative; background: #000; z-index: 1; } .swiper-mhistory {} .swiper-history-year { position: relative; } .swiper-history-year::before { content: ''; display: block; width: 100%; height: 1px; background: #ccc; position: absolute; left: 0; top: 20px; } .swiper-history-year .swiper-slide { text-align: center; color: #999; font-size: 30px; background: #f6f6f6; font-family: 'Barlow-Light', Microsoft Yahei, Arial; } .swiper-history-year .swiper-slide.swiper-slide-thumb-active { color: #00bf86; font-weight: bold; } .banner-slide {} .banner-slide .txt { position: absolute; width: 900px; left: 10%; top: 54%; margin-top: -167px; z-index: 33; } .banner-slide .txt h4 { font-size: 20px; color: #00539c; margin: 0; padding: 0; position: relative; text-transform: uppercase; } .banner-slide .txt h2 { font-size: 60px; color: #fff; padding: 10px 0 25px 0; margin: 0; line-height: 70px; font-weight: bold; } .banner-slide .txt h3 { font-size: 20px; color: #fff; padding: 25px 0; margin: 0; font-weight: normal; line-height: 30px; } .banner-slide .txt .line { width: 80px; height: 4px; background: #00539c; margin: 10px 0; } .banner-slide .txt.center { text-align: center; width: 100%; left: 0; top: 20%; margin: 0; } .banner-slide .txt.center .line { margin: 10px auto; } .banner-slide .txt.right { left: auto; right: 5%; } .banner-slide .txt.none { display: none; } .banner-slide .img { text-align: center; } .banner-slide .txt .img { text-align: left; } .banner-slide .txt h4 { transform: translateY(200px); opacity: 0; transition: all 0.3s; } .banner-slide .txt h2 { transform: translateY(200px); opacity: 0; transition: all 0.5s; } .banner-slide .txt h3 { transform: translateY(200px); opacity: 0; transition: all 0.8s; } .banner-slide .txt .line { transform: translateY(200px); opacity: 0; transition: all 0.7s; } .index-banner-swiper .swiper-slide-active .txt h4, .index-banner-swiper .swiper-slide-active .txt h2, .index-banner-swiper .swiper-slide-active .txt h3, .index-banner-swiper .swiper-slide-active .txt .line { transform: translateY(0px); opacity: 1; } .swiper-banner-pagination { bottom: 55px; width: 100%; display: block; z-index: 90; } .swiper-banner-pagination .swiper-pagination-bullet { width: 60px; height: 10px; margin: 0 0 0 10px; border-radius: 0; opacity: 1; background: none; position: relative; z-index: 11; outline: none; } .swiper-banner-pagination .swiper-pagination-bullet::before { content: ''; display: block; width: 100%; height: 2px; position: absolute; left: 0; top: 5px; background: #fff; opacity: 0.3; } .swiper-banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { opacity: 1; } .swiper-banner-pagination .swiper-pagination-bullet::after { content: ''; display: block; position: absolute; left: 0; top: 5px; width: 0; height: 2px; background: #00539c; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; z-index: 10; } .swiper-banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { -webkit-animation: w100 4000ms 1; animation: w100 4000ms 1; } @keyframes w100 { 0% { width: 0%; } 100% { width: 100%; } } .index-products-center { padding: 3%; overflow: hidden; } .index-products-center .top { width: 85%; margin: auto; padding: 0px 0 50px 0; overflow: hidden; position: relative; } .index-products-center .top .title-style { text-align: center; } .index-products-center .top .title-style .line { margin: 20px auto auto; } .index-products-center .top .text { padding: 20px 0 0 0; overflow: hidden; color: #737373; font-size: 16px; line-height: 26px; text-align: center; } .index-products-center .bottom5 { position: relative; padding-left: 33.333333%; background: #fff; overflow: hidden; } .index-products-center .bottom5 a:first-child { position: absolute; left: 0; top: 0; width: 33.333333%; height: 100%; } .index-products-center .bottom5 a:first-child .text { bottom: 4.2%; } .index-products-center .bottom5 a { position: relative; display: block; overflow: hidden; float: left; width: 50%; padding: 1px; box-sizing: border-box; } .index-products-center .bottom5 .text { position: absolute; left: 5%; bottom: 8%; width: 90%; z-index: 50; color: #fff; } .index-products-center .bottom5 .text h4 { font-size: 20px; font-weight: normal; margin: 8px 0; text-transform: uppercase; opacity: .2; } .index-products-center .bottom5 .text h3 { font-size: 20px; margin: 0; } .index-products-center .bottom5 .img { position: relative; overflow: hidden; } .index-products-center .bottom5 a:hover .img img.img-center { transform: scale(1.1); } .index-about { position: relative; } .index-about .title-style { text-align: center; width: 100%; padding-bottom: 50px; } .index-about .title-style h2 { color: #fff; } .index-about .title-style .line { margin: 20px auto auto; } .index-about .title-style h6 { font-size: 16px; line-height: 24px; color: #fff; padding: 20px 0; margin: 0; font-weight: normal; overflow: hidden; opacity: .6; } .index-about .about-item { position: absolute; top: 0; left: 12.5%; width: 75%; height: 100%; z-index: 3; } .index-about .about-item .content { width: 100%; height: 470px; border: 1px solid rgba(255, 255, 255, .3); overflow: hidden; background: rgba(0, 0, 0, 0.2) } .index-about .about-item .left { padding: 6% 3% 0 5%; overflow: hidden; width: 43%; height: 90%; position: relative; } .index-about .about-item .left::after { content: ''; display: block; width: 1px; height: 100%; background: #fff; position: absolute; right: 0; top: 0; opacity: .3; } .index-about .about-item .left .title { overflow: hidden; } .index-about .about-item .left .title h2 { text-transform: uppercase; margin: 0; color: #fff; } .index-about .about-item .left .title h4 { font-size: 20px; margin: 10px 0; color: #fff; } .index-about .about-item .left .title .line { width: 80px; height: 4px; background: #00539c; margin: 25px 0; } .index-about .about-item .left .text { font-size: 16px; line-height: 26px; color: #fff; opacity: .6; } .index-about .about-item .left .play { display: inline-block; margin-top: 30px; } .index-about .about-item .left .play a { display: block; overflow: hidden; background: #00539c; border: 1px solid #00539c; padding: 15px 20px; font-size: 0; } .index-about .about-item .left .play i { width: 13px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 10px; background: url("../image/play.png") center no-repeat; background-size: 100%; } .index-about .about-item .left .play span { font-size: 14px; color: #fff; display: inline-block; vertical-align: middle; margin-right: 10px; } .index-about .about-item .left .play a:hover { background: #00427c; border: 1px solid #00427c; } .index-about .about-item .left .play a:hover span, .index-about .about-item .left .play a:hover i { opacity: 1; } .index-about .about-item .right { overflow: hidden; width: 49%; position: relative; } .index-about .about-item .right::after { content: ''; display: block; width: 100%; height: 1px; background: #fff; position: absolute; left: 0; top: 50%; margin-top: -0.5px; opacity: .3; } .index-about .about-item .right .item { position: relative; float: left; width: 33.3333333%; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; } .index-about .about-item .right .item:hover { background: #00539c; } .index-about .about-item .right .item li { color: #fff; list-style: none; position: absolute; left: 0; top: 0; width: 90%; padding: 30% 0 0 10%; height: 80%; } .index-about .about-item .right .item li h2 { font-weight: normal; margin: 0; } .index-about .about-item .right .item li h2 strong { font-size: 60px; } .index-about .about-item .right .item li h2 span { font-size: 18px; font-weight: normal; margin-left: 5px; } .index-about .about-item .right .item li h6 { font-weight: normal; margin: 0; font-size: 16px; line-height: 26px; opacity: .7; } .index-about .about-item .right .item .img img { display: block; width: 100%; height: auto; opacity: 0; } .index-about .about-item .right .item::after { content: ''; display: block; width: 1px; height: 100%; background: #fff; position: absolute; right: 0; top: 0; opacity: .3; } .index-about .about-item .right .item:last-child::after, .index-about .about-item .right .item:nth-child(3)::after { display: none; } .index-about .img {} .index-about .img img { display: block; width: 100%; height: auto; } .index-newscenter { padding: 100px 0 0px 0; overflow: hidden; width: 75%; margin: auto; } .index-newscenter .title h2 { font-size: 42px; text-transform: uppercase; margin: 0; color: #1a1a1a; } .index-newscenter .title .line { width: 80px; height: 4px; background: #00539c; margin: 15px 0; } .index-newscenter .top { background: inherit; position: relative; margin-bottom: 20px; overflow: hidden; } .index-newscenter .title .en { font-size: 55px; font-weight: bold; line-height: 66px; color: #8CC63E; } .index-newscenter .title .cn { font-size: 35px; line-height: 44px; color: #8CC63E; } .index-newscenter .top .newsnav-r { position: absolute; display: flex; right: .4%; top: 20px; padding-bottom: 20px; } .index-newscenter .top .newsnav-r a { font-size: 17px; color: #999999; font-weight: bold; margin-left: 50px; position: relative; } .index-newscenter .top .newsnav-r a.cur::before { content: ''; width: 50%; height: 2px; background: #8CC63E; top: -10px; position: absolute; left: 0; z-index: 1; } .index-newscenter .top .newsnav-r a:first-child { margin-left: 0; } .index-newscenter .top .newsnav-r a.cur { color: #1a1a1a; } .index-newscenter .top .newsnav-r a:hover { color: #000; } .index-newslist { display: flex; justify-content: space-between; padding-bottom: 100px; padding-top: 100px; } .index-newslist a { display: block; /* overflow: hidden; */ float: left; width: 20.5%; height:510px; background: #f7f7f7; border-radius: 30px; position: relative; } .index-newslist a:nth-child(even){ /* position: relative; */ /* top: -100px; */ } .index-newslist a .img { position: relative; overflow: hidden; } .index-newslist a:hover .img img.img-center { transform: scale(1.1); } .index-newslist a .text { padding: 6.2%; overflow: hidden; } .index-newslist a .text h2 { font-size: 15px; line-height: 35px; color: #666666; color: #1a1a1a; height: 180px; overflow: hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; text-align: justify; } .index-newslist a .text h5 { font-size: 14px; color: #999999; margin: 0; font-weight: normal; } .index-newslist a:hover { background: #f0f0f0; } .ddnew1{ position: absolute; top: 0; opacity: 0; height:100%; background: #fff; border-radius:20px; } .ddnew2{ position: absolute; top: 0; opacity: 1; padding:85px 40px 0 40px; color:#000; text-align:center; display: flex; flex-direction: column; align-items: center; height:100%; } .ddnew2 .ddtitle{ font-size: 19px; font-weight: bold; line-height: 40px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 80px; } .ddnew2 .ddline{ width:28px;height:3px;background:#98CD61;margin-top:20px;margin-bottom:20px; } .ddnew2 .ddinfo{ font-size: 15px; color:#666666; line-height: 35px; overflow: hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; } .ddnew2 .ddtime{ display: flex; flex-direction: column; } .ddnew2 .ddtime span{ font-size:14px;font-weight:bold; } .ddnew2 .ddtime span:first-child{ font-size:40px;font-weight:bold; } .ddnew2 .ddtime span:last-child{ position:relative;top:-10px; } .ddnew2 .ddcircle { width: 50px; height: 50px; background-color: #98CD61; border-radius: 50%; /* 使元素变成圆形 */ position: relative; display: flex; justify-content: center; align-items: center; position: absolute; bottom: -24px; } .ddnew2 .ddcircle img { width:30px; } .index-newslist a.mr0 { margin-right: 0; } .index-newsmore { margin-top: 30px; clear: both; } .viewmore-btn { font-size: 0; display: inline-block; position: relative; } .viewmore-btn a { display: block; border: 1px solid #ccc; padding: 15px 30px; } .viewmore-btn span { font-size: 14px; color: #666; display: inline-block; vertical-align: middle; margin-right: 10px; z-index: 3; position: relative; } .viewmore-btn i { width: 9px; height: 12px; display: inline-block; vertical-align: middle; margin-right: 10px; background: url("../image/right2.png"); background-size: 100% 100%; margin-top: 3px; position: relative; z-index: 3; opacity: .5; } .viewmore-btn a::before { content: ''; display: block; width: 5px; height: 100%; position: absolute; left: 0; top: 0; background: #00539c; z-index: 1; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; } .viewmore-btn a:hover::before { width: 100%; } .viewmore-btn a:hover span { color: #fff; } .viewmore-btn a:hover i { background: url("../image/right3.png"); background-size: 100% 100%; opacity: 1; } /* page*/ .product-detail .header11-height { height: 125px; } .header11-height { height: 85px; } .section { background-position: center; background-repeat: no-repeat; background-size: cover; clear: both; overflow: hidden; } .section .content {} .title-style { overflow: hidden; } .title-style h3 { text-transform: uppercase; font-size: 36px; margin: 5px 0 0 0; color: #00539c; } .title-style h1 { text-transform: uppercase; font-size: 60px; line-height: 60px; margin: 8px 0 20px 0; color: #1a1a1a; } .title-style h2 { text-transform: uppercase; font-size: 42px; line-height: 60px; margin: 8px 0 20px 0; color: #1a1a1a; } .title-style h5 { font-size: 20px; margin: 0; color: #666; line-height: 30px; } .title-style h4 { text-transform: uppercase; font-size: 20px; margin: 5px 0 0 0; color: #00539c; } .title-style .line { width: 80px; height: 4px; background: #00539c; margin: 10px 0; } .title-style-1 {} .view-btn { overflow: hidden; display: inline-block; clear: both; } .view-btn a { background: #00539c; display: block; padding: 18px 30px; overflow: hidden; font-size: 0; line-height: normal; } .view-btn i { display: inline-block; vertical-align: middle; margin-right: 10px; } .view-btn h5 { display: inline-block; vertical-align: middle; font-size: 14px; color: #fff; margin: 0; } .view-btn a:hover { background: #00aa77; } .img-center { position: absolute; display: block; left: 0; top: 0; bottom: 0; right: 0; margin: auto; width: auto!important; height: auto!important; } .img-block { display: block; width: 100%; height: auto; } .faq-btn { clear: both; padding: 30px 0; } .faq-btn a { background: #ededed; border-radius: 30px; display: inline-block; padding: 5px 20px; font-size: 0; } .faq-btn i { display: inline-block; vertical-align: middle; margin-right: 10px; } .faq-btn i img { display: block; } .faq-btn h6 { font-size: 14px; color: #b2b2b2; font-weight: normal; display: inline-block; vertical-align: middle; margin: 0; } .faq-btn a:hover { background: #000; } .line-height-30 { line-height: 30px; } .swiper-button-next, .swiper-button-prev, .swiper-pagination .swiper-pagination-bullet { outline: none; } .link-btn-r { display: block; width: 55px; height: 55px; background: #ccc url("../image/link1.png") center no-repeat; border-radius: 100%; position: absolute; top: 7px; right: 0; } .link-btn-r:hover { background: #00539c url("../image/link2.png") center no-repeat; } /* evcharger */ .screen-banner { position: relative; } .screen-banner-swiper {} .screen-banner-swiper .screen-banner-slide { position: relative; } .screen-banner-swiper .screen-banner-slide .main { position: absolute; left: 50%; top: 0; width: 1400px; height: 100%; margin-left: -700px; z-index: 10; } .screen-banner-swiper .screen-banner-slide .title { text-align: center; position: relative; } .screen-banner-swiper .screen-banner-slide .title h2 { font-size: 120px; color: #fff; margin: 0; text-transform: uppercase; opacity: .1; } .screen-banner-swiper .screen-banner-slide .title h4 { font-size: 18px; line-height: 30px; color: #00539c; margin: 50px 0 0; } .screen-banner-swiper .screen-banner-slide .title h3 { font-size: 65px; color: #fff; margin: 0; } .screen-banner-swiper .screen-banner-slide .title .text { position: absolute; left: 0; top: 0; text-align: center; width: 100%; } .screen-banner-swiper .screen-banner-slide .line { width: 80px; height: 4px; background: #00539c; margin: 50px auto; } .screen-banner-swiper .screen-banner-slide .img { position: relative; } .screen-banner-swiper .screen-banner-slide .img img { display: block; } .screen-banner-swiper .screen-banner-slide .data5 { clear: both; margin-top: 50px; overflow: hidden; text-align: center; font-size: 0; } .screen-banner-swiper .screen-banner-slide .data5 li { padding: 0 3%; font-size: 14px; color: #c0c1c2; display: inline-block; vertical-align: top; position: relative; } .screen-banner-swiper .screen-banner-slide .data5 li::after { content: ''; display: block; position: absolute; width: 1px; height: 100%; background: #fff; opacity: .1; right: 0; top: 0; } .screen-banner-swiper .screen-banner-slide .data5 li h3 { color: #fff; margin: 0px 0 10px 0; } .screen-banner-swiper .screen-banner-slide .data5 li h3 strong { font-size: 30px; } .screen-banner-swiper .screen-banner-slide .data5 li h3 span { font-size: 16px; } .screen-banner-swiper .swiper-pagination {} .screen-banner-swiper .swiper-pagination { bottom: 10%; } .screen-banner-swiper .swiper-pagination-bullet { background: #fff; width: 60px; height: 2px; border-radius: 0; } .screen-banner-swiper .swiper-pagination-bullet-active { background: #00539c; } .screen-banner-bottom.position-fixed.top85 { top: 0px; transform: translateY(85px); } .screen-banner-bottom.position-fixed { position: fixed; top: 0px; bottom: auto; border-bottom: 1px solid #e5e5e5; border-top: none; background: #fff; z-index: 99; } .screen-banner-bottom.position-fixed a { height: 60px; line-height: 60px; font-size: 14px; font-weight: normal; } .screen-banner-bottom.position-fixed a.cur { color: #000; } .screen-banner-bottom.position-fixed a::after { background: #e5e5e5; opacity: 1; } .screen-banner-bottom.position-fixed a:hover { color: #000; } .screen-banner-bottom { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 40; border-top: 1px solid rgba(255, 255, 255, .1); transition: all .4s ease; } .screen-banner-bottom-nav { width: 75%; margin: auto; position: relative; overflow: hidden; } .screen-banner-bottom-nav::before { content: ''; display: block; width: 1px; height: 30px; background: #fff; position: absolute; left: 0; top: 50%; margin-top: -15px; opacity: .1; } .screen-banner-bottom-nav a { color: white; display: block; float: left; width: 20%; height: 70px; line-height: 70px; position: relative; text-align: center; font-weight: bold; font-size: 17px; } .screen-banner-bottom-nav a::before { content: ''; display: none; width: 100%; height: 3px; background: #00539c; position: absolute; top: 0; left: 0; z-index: 10; } .screen-banner-bottom-nav a::after { content: ''; display: block; width: 1px; height: 30px; background: #fff; position: absolute; top: 50%; margin-top: -15px; opacity: .1; } .screen-banner-bottom-nav a::after { right: 0; } .screen-banner-bottom-nav a.cur { background: url("../image/nav.png") top repeat-x; color: #dee1e0; } .screen-banner-bottom-nav a:hover { background: url("../image/nav.png") top repeat-x; color: #dee1e0; } .screen-banner-bottom-nav a:hover::before, .screen-banner-bottom-nav a.cur::before { display: block; } .screen-banner-bottom-nav.num3 a { width: 25%; } .screen-banner-bottom-nav.num2 a { width: 50%; } .screen-banner-bottom-nav.num4 a { width: 25%; } .screen-banner-bottom-nav.num5 {} /*相关产品*/ .product-range { padding: 100px 0 80px 0; overflow: hidden; } .product-range .title { text-align: center; margin-bottom: 60px; } .product-range .title h2 { margin: 0; font-size: 40px; } .product-range .title h4 { margin: 10px auto; font-weight: normal; font-size: 16px; color: #999999; } .product-range-list { margin: 0px auto; width: 75%; position: relative; padding: 0 5%; text-align: center; font-size: 0; } .product-range-list .item { background: #fff; position: relative; overflow: hidden; display: block; width: 49.5%; margin: 0 1% 1% 0; text-align: left; float: left; } .product-range-list .item.mr0 { margin-right: 0; } .product-range-list .item .text { position: absolute; left: 8%; top: 0; width: 45%; height: 100%; z-index: 31; color: #000; overflow: hidden; } .product-range-list .item .text h3 { display: block; width: 80%; font-size: 26px; color: #1a1a1a; margin: 0; text-transform: uppercase; position: relative; padding-bottom: 20px; margin-bottom: 15px; } .product-range-list .item .text h3::before, .product-range-list .item .text h3::after { content: ''; display: block; width: 80%; height: 2px; background: #e8e8e8; position: absolute; left: 0; bottom: 0; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; } .product-range-list .item .text h3::before { width: 60px; background: #00539c; z-index: 3; } .product-range-list .item .text h5 { font-size: 14px; line-height: 24px; color: #999999; font-weight: normal; margin: 0; } .product-range-list .item .text h6 { display: inline-block; clear: both; font-size: 14px; color: #999999; font-weight: normal; margin: 30px 0 0; padding-right: 25px; background: url("../image/right11.png") right center no-repeat; } .product-range-list .item .img { position: relative; float: right; width: 50%; } .product-range-list .item a { display: block; overflow: hidden; } .product-range-list .item a .img img.img-center { transform: scale(.96); } .product-range-list .item a:hover .img img.img-center { transform: scale(1); } .product-range-list .item a:hover h3::before { width: 80%; } .product-range-list .product-range-list-swiper { padding-bottom: 50px; } .product-range-list .product-range-list-swiper .item { width: 100%; margin: 0; float: none; } .product-range-list .product-range-list-swiper .swiper-pagination { bottom: 0; } .product-range-list .product-range-list-swiper .swiper-pagination span { border-radius: 0px; width: 40px; height: 2px; } .product-range-list .product-range-list-swiper .swiper-pagination span.swiper-pagination-bullet-active { background: #00539c; } /*解决方案*/ .evcharger-solution { position: relative; margin: 2%; overflow: hidden; } .evcharger-solution-nav { text-align: center; font-size: 0; padding: 40px 0; overflow: hidden; } .evcharger-solution-nav a { position: relative; padding: 0 65px; display: inline-block; vertical-align: middle; font-size: 0; } .evcharger-solution-nav a.cur {} .evcharger-solution-nav a i { width: 45px; height: 30px; display: inline-block; vertical-align: middle; } .evcharger-solution-nav a i img { opacity: .3; width: 70%; margin: auto; } .evcharger-solution-nav a span { color: #bfbfbf; font-size: 17px; font-weight: bold; display: inline-block; vertical-align: middle; padding-left: 5px; } .evcharger-solution-nav a:hover span { color: #000; } .evcharger-solution-nav a:hover i img { opacity: 1; } .evcharger-solution-nav a::after { content: ''; display: block; width: 1px; height: 100%; background: #dedede; position: absolute; right: 0; top: 0; } .evcharger-solution-nav a.cur span { color: #00539c; } .evcharger-solution-nav a.cur i img { opacity: 1; } .evcharger-solution-nav a i svg { opacity: .3; width: 70%; margin: auto; } .evcharger-solution-nav a:hover i * { fill: #000; opacity: 1; } .evcharger-solution-nav a.cur i *, .evcharger-solution-nav a.cur:hover i * { fill: #00539c; opacity: 1; } .evcharger-solution-banner { position: relative; padding-bottom: 270px; overflow: hidden; } .evcharger-solution-banner .text { color: #fff; position: absolute; width: 800px; height: 100%; left: 50%; top: 0; margin-left: -400px; z-index: 10; text-align: center; } .evcharger-solution-banner .text h4 { font-size: 16px; margin: 0; font-weight: normal; } .evcharger-solution-banner .text h3 { font-size: 40px; margin: 0; } .evcharger-solution-banner .text .line { width: 80px; height: 4px; background: #00539c; margin: 25px auto; } .evcharger-solution-banner .text h5 { margin: 0; font-weight: normal; font-size: 16px; line-height: 28px; opacity: .8; } .evcharger-solution-banner .img { position: relative; } .evcharger-solution-banner .item4 { width: 78%; position: absolute; left: 11%; bottom: 0; z-index: 10; } .evcharger-solution-banner .item4 a { display: block; background: #fff; width: 18.2%; padding: 2% 3% 3% 3%; float: left; border-top: 4px solid #00539c; margin-right: 1%; } .evcharger-solution-banner .item4 a:last-child { margin-right: 0; } .evcharger-solution-banner .item4 a h2 { margin: 0; font-weight: normal; font-size: 80px; color: #ededed; padding-bottom: 20px; } .evcharger-solution-banner .item4 a h5 { margin: 0; font-weight: normal; font-size: 14px; color: #ccc; text-transform: uppercase; } .evcharger-solution-banner .item4 a h4 { margin: 0; font-size: 18px; } .evcharger-solution-banner .item4 a h6 { margin: 0; font-weight: normal; font-size: 15px; line-height: 25px; height: 100px; overflow: hidden; color: #666666; } .evcharger-solution-banner .item4 .line { margin-top: 15px; } .line-ain { height: 20px; position: relative; } .line-ain::before, .line-ain::after { content: ''; display: block; width: 100%; height: 2px; background: #ccc; position: absolute; left: 0; top: 0; transition: all .4s ease; } .line-ain::before { width: 60px; background: #00539c; } .line-ain::after { opacity: .3; } .evcharger-our-project { padding: 130px 0 0px 0; overflow: hidden; background: #f7f7f7; } .evcharger-our-project .title { text-align: center; } .evcharger-our-project .title h2 { margin: 0; font-size: 40px; } .evcharger-our-project .title h4 { margin: 10px auto; font-weight: normal; font-size: 16px; color: #999999; } .our-project-swiper-3 { margin-top: 60px; overflow: hidden; } .our-project-swiper-3 .project-3 { position: relative; overflow: hidden; } .our-project-swiper-3 .text { position: absolute; width: 90%; padding: 5%; overflow: hidden; bottom: 0; z-index: 4; color: #fff; } .our-project-swiper-3 .text h4 { font-size: 20px; margin: 10px 0; } .our-project-swiper-3 .text h6 { font-weight: normal; font-size: 14px; line-height: 20px; opacity: .6; margin: 0; } .our-project-swiper-3 .img {} .our-project-swiper-3 .img img { display: block; width: 100%; height: auto; position: relative; z-index: 3; } .our-project-swiper-3 .img .img-center { position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; width: auto; height: auto; z-index: 1; } .our-project-swiper-3 .swiper-button-next, .our-project-swiper-3 .swiper-button-prev { width: 60px; height: 60px; margin-top: -30px; background-color: rgba(0, 0, 0, .5); } .our-project-swiper-3 .swiper-button-next { right: 50%; left: auto; margin-right: -475px; background-image: url("../image/right1.png"); background-size: auto; } .our-project-swiper-3 .swiper-button-prev { left: 50%; margin-left: -475px; background-image: url("../image/left1.png"); background-size: auto; } .our-project-swiper-3 .swiper-button-next:hover, .our-project-swiper-3 .swiper-button-prev:hover { background-color: #00539c; } .our-project-swiper-3 .project-3 a { display: block; } .our-project-swiper-3 .project-3 a:hover .img .img-center { transform: scale(1.1); } .application-mode { padding: 100px 0; overflow: hidden; } .application-mode .title { text-align: center; } .application-mode .title h2 { margin: 0; font-size: 40px; } .application-mode .title h4 { margin: 10px auto; font-weight: normal; font-size: 16px; color: #999999; } .application-mode-content { margin: 0px auto; width: 75%; position: relative; padding: 3% 0 0 0; overflow: hidden; } .amc-item2 { overflow: hidden; } .amc-item2 .item { background: #fff; float: left; width: 49.4%; margin: 0 1% 1% 0; } .amc-item2 .item.mr0 { margin: 0 0 1% 0; } .amc-item2 .item a { display: block; overflow: hidden; padding: 5%; position: relative; } .amc-item2 .item a:hover h4::before { width: 100%; } .amc-item2 .item .img { position: relative; width: 47.5%; float: left; } .amc-item2 .item .text { position: absolute; right: 7%; top: 0; width: 38%; height: 100%; } .amc-item2 .item .text h6 { margin: 0; font-weight: normal; font-size: 16px; color: #ccc; padding-bottom: 5px; } .amc-item2 .item .text h4 { margin: 0; font-weight: bold; font-size: 20px; position: relative; padding-bottom: 15px; } .amc-item2 .item .text h4::before, .amc-item2 .item .text h4::after { content: ''; display: block; height: 2px; position: absolute; left: 0; bottom: 0; } .amc-item2 .item .text h4::before { width: 80px; background: #00539c; z-index: 1; transition: all .4s ease; } .amc-item2 .item .text h4::after { width: 100%; background: #e5e5e5; } .amc-item2 .item .text h5 { margin: 0; font-weight: normal; font-size: 15px; color: #999; line-height: 25px; padding-top: 15px; } .amc-item8 { overflow: hidden; } .amc-item8 .item { background: #fff; float: left; width: 24%; margin: 0 1% 1% 0; } .amc-item8 .item.mr0 { margin: 0 0 1% 0; } .amc-item8 .item a { display: block; overflow: hidden; padding: 10%; position: relative; } .amc-item8 .item a:hover h4::before { width: 100%; } .amc-item8 .item .img { position: relative; width: 51px; height: 51px; } .amc-item8 .item .text { width: 100%; height: 100%; } .amc-item8 .item .text h4 { margin: 0; font-weight: bold; font-size: 20px; position: relative; padding: 15px 0; display: block; } .amc-item8 .item .text h4::before, .amc-item8 .item .text h4::after { content: ''; display: block; height: 2px; position: absolute; left: 0; bottom: 0; } .amc-item8 .item .text h4::before { width: 80px; background: #00539c; z-index: 1; transition: all .4s ease; } .amc-item8 .item .text h4::after { width: 100%; background: #e5e5e5; } .amc-item8 .item .text h5 { margin: 0; font-weight: normal; font-size: 15px; color: #999; line-height: 25px; padding-top: 15px; min-height: 110px; } .amc-item4 { overflow: hidden; } .amc-item4 .item { background: #fff; float: left; width: 23.5%; margin: 0 2% 1% 0; } .amc-item4 .item.mr0 { margin: 0 0 1% 0; } .amc-item4 .item a { display: block; overflow: hidden; position: relative; } .amc-item4 .item a:hover h4::before { width: 100%; } .amc-item4 .item .img { position: relative; background: #f7f7f7; border: 1px solid #e6e6e6; } .amc-item4 .item .text { overflow: hidden; padding: 30px 0 0 0; } .amc-item4 .item .text h4 { margin: 0; font-weight: bold; font-size: 17px; position: relative; padding-bottom: 15px; } .amc-item4 .item .text h4::before, .amc-item4 .item .text h4::after { content: ''; display: block; height: 2px; position: absolute; left: 0; bottom: 0; } .amc-item4 .item .text h4::before { width: 80px; background: #00539c; z-index: 1; transition: all .4s ease; } .amc-item4 .item .text h4::after { width: 100%; background: #e5e5e5; } .amc-item4 .item .text h5 { margin: 0; font-weight: normal; font-size: 15px; color: #999; line-height: 25px; padding-top: 15px; min-height: 90px; } .amc-item4 .item .text h6 { font-size: 14px; color: #000; background: url("../image/r1.png") right center no-repeat; opacity: .3; display: inline-block; padding-right: 20px; margin: 0; } .amc-item4 .item a:hover h6 { opacity: 1; } .system-advantages { position: relative; overflow: hidden; } .system-advantages .img {} .system-advantages .img img { display: block; width: 100%; height: auto; } .system-advantages-content { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 11; overflow: hidden; text-align: center; } .system-advantages-content .title { position: absolute; width: 300px; left: 50%; margin-left: -150px; top: 140px; } .system-advantages-content .title h2 { color: #fff; margin: 0; font-size: 40px; } .system-advantages-content .title h4 { color: #919298; margin: 10px auto; font-weight: normal; font-size: 16px; } .system-advantages-content-main { width: 1200px; margin: 100px auto auto; } .system-advantages-content-main .sacm-content { position: relative; width: 100%; height: 100%; } .system-advantages-content-main .sapic2 { position: absolute; width: 450px; text-align: center; left: 50%; top: 25%; margin-left: -225px; } .system-advantages-content-main .sapic1 {} .system-advantages-content-main .sacm-content .item { position: absolute; text-align: right; } .system-advantages-content-main .sacm-content .item h3 { margin: 0; color: #fff; } .system-advantages-content-main .sacm-content .item h5 { font-weight: normal; color: #bbbbbf; margin: 10px 0 20px 0; } .system-advantages-content-main .sacm-content .item .liney { margin-right: -63px; } .system-advantages-content-main .sacm-content .item.item1 { left: 100px; top: 150px; } .system-advantages-content-main .sacm-content .item.item2 { left: 850px; top: 150px; text-align: left; } .system-advantages-content-main .sacm-content .item.item2 .liney { margin-left: -63px; margin-right: 0; transform: rotateY(180deg); } .system-advantages-content-main .sacm-content .item.item3 { left: 950px; top: 550px; text-align: left; } .system-advantages-content-main .sacm-content .item.item3 .liney { margin-left: -63px; margin-right: 0; transform: rotateY(180deg); } .system-advantages-content-main .sacm-content .item.item4 { left: 60px; top: 550px; } .mark-section-bg-fixed { width: 100%; height: 660px; overflow: hidden; position: relative; } .mark-section-bg-fixed .play { width: 100px; height: 60px; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -50px; z-index: 11; cursor: pointer; } .mark-section-bg-fixed .play i { display: block; margin: auto; width: 58px; height: 58px; border: 2px solid #fff; background: url("../image/play.png") center no-repeat; transition: all .4s ease; } .mark-section-bg-fixed .play span { display: block; padding: 10px 0; text-align: center; color: #fff; font-size: 14px; text-transform: uppercase; } .mark-section-bg-fixed .play:hover i { background: #00539c url("../image/play.png") center no-repeat; border: 2px solid #00539c; } .roll-content { height: 500px; overflow: auto; } .roll-content::-webkit-scrollbar { height: 4px; width: 2px; background: #ccc; } .roll-content::-webkit-scrollbar-thumb { background-color: #000; box-shadow: inset 1px 1px 0 #000, inset 0 -1px 0 #000; } .roll-content .roll-main { padding-right: 5%; overflow: hidden; } /*优势介绍*/ .power-quality-advantage { position: relative; margin: 2%; overflow: hidden; } .power-quality-advantage .title { text-align: center; position: absolute; width: 400px; left: 50%; margin-left: -200px; top: 40px; } .power-quality-advantage .title h3 { font-size: 30px; line-height: 44px; } .power-quality-advantage-content { overflow: hidden; } .advantage-yuanquan { width: 1140px; margin: 40px auto auto auto; position: relative; } .advantage-yuanquan .advantage-yuanquan-pic { position: absolute; width: 500px; height: 500px; left: 50%; top: 50%; margin: -250px 0 0 -250px; z-index: 10; } .advantage-yuanquan .advantage-yuanquan-pic .advantage-yuanquan-swiper {} .advantage-yuanquan .advantage-yuanquan-pic .advantage-yuanquan-swiper .img { width: 500px; height: 500px; position: relative; } .advantage-yuanquan .advantage-yuanquan-nav { position: absolute; left: 0; width: 100%; height: 100%; top: 200px; z-index: 10; } .advantage-yuanquan .advantage-yuanquan-nav a { text-align: right; display: block; position: absolute; } .advantage-yuanquan .advantage-yuanquan-nav a i { display: block; width: 8px; height: 8px; background: #000; position: absolute; right: 5px; top: 13px; border-radius: 100%; opacity: .5; } .advantage-yuanquan .advantage-yuanquan-nav a i::after { content: ''; display: block; width: 16px; height: 16px; position: absolute; right: -5px; top: -5px; border-radius: 100%; border: 1px solid #000; } .advantage-yuanquan .advantage-yuanquan-nav a h3 { margin: 0; font-weight: bold; font-size: 17px; border: 2px solid #c6c6c7; display: inline-block; padding: 7px 20px; } .advantage-yuanquan .advantage-yuanquan-nav a h5 { margin: 0; font-weight: normal; font-size: 15px; line-height: 24px; color: #666666; margin-top: 10px; } .advantage-yuanquan .advantage-yuanquan-nav a.yn1 { right: 705px; top: 0; padding-right: 50px; } .advantage-yuanquan .advantage-yuanquan-nav a.yn2 { left: 705px; top: 0; text-align: left; padding-left: 50px; } .advantage-yuanquan .advantage-yuanquan-nav a.yn3 { left: 860px; top: 255px; text-align: left; padding-left: 50px; } .advantage-yuanquan .advantage-yuanquan-nav a.yn4 { left: 740px; top: 500px; text-align: left; padding-left: 50px; } .advantage-yuanquan .advantage-yuanquan-nav a.yn5 { left: 50%; right: auto; top: 560px; margin-left: -100px; text-align: center; padding: 50px 0 0 0; } .advantage-yuanquan .advantage-yuanquan-nav a.yn6 { right: 740px; top: 500px; padding-right: 50px; } .advantage-yuanquan .advantage-yuanquan-nav a.yn7 { right: 860px; top: 255px; padding-right: 50px; } .advantage-yuanquan .advantage-yuanquan-nav a.yn2 i, .advantage-yuanquan .advantage-yuanquan-nav a.yn3 i, .advantage-yuanquan .advantage-yuanquan-nav a.yn4 i { left: 5px; right: auto; } .advantage-yuanquan .advantage-yuanquan-nav a.yn5 i { right: 50%; margin-left: -4px; } .advantage-yuanquan .advantage-yuanquan-nav a:hover h3 { border: 2px solid #000; } .advantage-yuanquan .advantage-yuanquan-nav a:hover i { opacity: 1; } .advantage-yuanquan .advantage-yuanquan-nav a.cur h3 { border: 2px solid #00539c; } .advantage-yuanquan .advantage-yuanquan-img { position: relative; width: 960px; margin: auto; } .advantage-yuanquan .advantage-yuanquan-img img { display: block; width: 100%; height: auto; } .evcharger-advantage { position: relative; margin: 2%; overflow: hidden; } .evcharger-advantage .img { position: relative; } .evcharger-advantage .title { position: absolute; left: 50%; top: 15%; text-align: center; color: #fff; width: 500px; margin-left: -250px; z-index: 10; } .evcharger-advantage .title h3 { margin: 0; font-size: 40px; } .evcharger-advantage .title h4 { margin: 10px 0; font-weight: normal; font-size: 16px; opacity: .6; } .evcharger-advantage .item3 { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 3; } .evcharger-advantage .item3 a { display: block; width: 20%; height: 100%; float: left; color: #fff; text-align: center; opacity: .8; background: url("../image/jb2.png") center 200% repeat-x; z-index: 10; position: relative; } .evcharger-advantage .item3 a .main { position: relative; width: 100%; height: 60%; z-index: 100; padding-top: 90%; overflow: hidden; } .evcharger-advantage .item3 a::before { content: ''; display: block; width: 1px; height: 100%; background: #fff; position: absolute; right: 0; top: 0; opacity: .15; } .evcharger-advantage .item3 a:last-child::before { display: none; } .evcharger-advantage .item3 i { display: block; position: relative; width: 90px; height: 65px; margin: auto; } .evcharger-advantage .item3 i .img { display: block; } .evcharger-advantage .item3 h3 { margin: 5px 0 20px 0; } .evcharger-advantage .item3 .line { width: 50px; height: 3px; background: #00539c; margin: 10px auto; } .evcharger-advantage .item3 .text { font-size: 15px; width: 65%; margin: auto; line-height: 26px; } .evcharger-advantage .item3 a:hover, .evcharger-advantage .item3 a.cur { background: url("../image/jb2.png") bottom repeat-x; opacity: 1; z-index: 50; } .evcharger-advantage.sadvantage2 { margin: 6% auto 5% auto; } .evcharger-advantage.sadvantage2 .title { position: relative; left: auto; top: auto; margin: auto; color: #000; } .evcharger-advantage .item4 { position: relative; width: 100%; margin-top: 50px; overflow: hidden; } .evcharger-advantage .item4 a { display: block; width: 25%; float: left; color: #fff; position: relative; } .evcharger-advantage .item4 a .text { color: #fff; position: absolute; left: 10%; bottom: 5%; width: 80%; z-index: 30; } .evcharger-advantage .item4 a .text h5 { margin: 0; font-weight: normal; font-size: 14px; text-transform: uppercase; opacity: .3; } .evcharger-advantage .item4 a .text h3 { margin: 5px 0 15px 0; font-size: 18px; } .evcharger-advantage .item4 a .text .line { height: 20px; position: relative; } .evcharger-advantage .item4 a .text .line::before, .evcharger-advantage .item4 a .text .line::after { content: ''; display: block; width: 100%; height: 2px; background: #fff; position: absolute; left: 0; top: 0; transition: all .4s ease; } .evcharger-advantage .item4 a .text .line::before { width: 60px; background: #00539c; } .evcharger-advantage .item4 a .text .line::after { opacity: .3; } .evcharger-advantage .item4 a .text h6 { margin: 0; font-weight: normal; font-size: 14px; line-height: 24px; opacity: .6; display: block; height: 0px; overflow: hidden; } .evcharger-advantage .item4 a .img { position: relative; } .evcharger-advantage .item4 a .img .mark { opacity: 0; position: absolute; z-index: 20; width: 100%; height: 100%; background: url("../image/evc-mark.png") center bottom repeat-x; } .evcharger-advantage .item4 a:hover .text .line::before { width: 100%; } .evcharger-advantage .item4 a:hover .text h6 { display: block; height: 96px; } .evcharger-advantage .item4 a:hover .img .mark { opacity: 1; } .evcharger-advantage.sadvantage3 { margin: 6% auto 5% auto; } .evcharger-advantage.sadvantage3 .title { position: relative; left: auto; top: auto; margin: 0; color: #000; text-align: left; } .content-top { position: relative; } .navr4 { position: absolute; right: .4%; top: 20px; padding-bottom: 20px; } .navr4::after { content: ''; width: 100%; height: 2px; background: #ccc; bottom: 0; position: absolute; right: 0; } .navr4 a { font-size: 17px; color: #999999; font-weight: bold; margin-left: 50px; position: relative; } .navr4 a.cur::after { content: ''; width: 100%; height: 2px; background: #00539c; bottom: -21px; position: absolute; right: 0; z-index: 1; } .navr4 a:first-child { margin-left: 0; } .navr4 a.cur { color: #1a1a1a; } .navr4 a:hover { color: #000; } .partners-swiper4 { position: relative; margin-top: 50px; } .partners-swiper4 .img { width: 19.1%; height: 140px; margin-right: 1%; margin-bottom: 1%; float: left; position: relative; background: #fff; } .partners-swiper4 .img.mr0 { margin-right: 0; } .partners-swiper4 .img img { transition: all .4s ease; } .partners-swiper4 .img:hover img { transform: scale(1.1); } .battery-advantage { padding: 100px 0 0 0; overflow: hidden; } .battery-advantage .title { text-align: center; } .battery-advantage .title h3 { font-size: 40px; margin: 10px 0; } .battery-advantage .title h4 { font-size: 16px; color: #999999; margin: 0; } .battery-advantage .item6 { margin-top: 80px; } .item-av6 { background: #f7f7f7; width: 32.66%; margin: 0 1% 1% 0; float: left; position: relative; } .item-av6:nth-child(3), .item-av6:nth-child(6) { margin: 0 0 1% 0; } .item-av6 a { display: block; overflow: hidden; padding: 10% 10%; } .item-av6 i { width: 50px; height: 50px; position: relative; display: block; } .item-av6 h3 { margin: 0; font-weight: bold; font-size: 18px; padding: 15px 0 10px 0; } .item-av6 h5 { margin: 0; font-weight: normal; font-size: 15px; color: #666666; line-height: 25px; } .item-av6 h6 { margin: 0; font-weight: normal; font-size: 18px; color: #999999; position: absolute; right: 10%; top: 20%; } .serving-customers { margin-top: 80px; padding-bottom: 100px; overflow: hidden; } .serving-customers .img { position: relative; width: 19.2%; height: 135px; background: #fff; float: left; margin: 0 1% 1% 0; } .serving-customers .img:nth-child(5), .serving-customers .img:nth-child(10), .serving-customers .img:nth-child(15), .serving-customers .img:nth-child(20) { margin: 0 0 1% 0; } .energy-storage-advantage {} .energy-storage-advantage-content {} .energy-storage-advantage-yuanquan { position: relative; width: 1300px; margin: auto; overflow: hidden; } .es-yuanquan-text { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .es-yuanquan-text a { position: absolute; display: block; z-index: 15; } .es-yuanquan-text a i { display: block; width: 8px; height: 8px; background: #000; position: absolute; right: 5px; top: 13px; border-radius: 100%; opacity: .5; } .es-yuanquan-text a i::after { content: ''; display: block; width: 16px; height: 16px; position: absolute; right: -5px; top: -5px; border-radius: 100%; border: 1px solid #000; } .es-yuanquan-text a h3 { margin: 0; margin-bottom: 10px; border: 2px solid #ccc; padding: 7px 20px; ; position: relative; font-size: 0; display: inline-block; overflow: hidden; } .es-yuanquan-text a h3 em { display: inline-block; vertical-align: middle; margin-right: 10px; } .es-yuanquan-text a h3 strong { display: inline-block; vertical-align: middle; font-size: 17px; } .es-yuanquan-text a h5 { color: #666666; font-size: 15px; font-weight: normal; margin: 0; line-height: 26px; } .es-yuanquan-text a:hover h3 { border: 2px solid #000; } .es-yuanquan-text a:hover i { opacity: 1; } .es-yuanquan-text a.yq1 { left: 0; top: 100px; width: 100%; text-align: center; padding-bottom: 30px; } .es-yuanquan-text a.yq1 i { right: 50%; top: auto; bottom: 0; } .es-yuanquan-text a.yq2 { left: 883px; top: 280px; padding-left: 50px; } .es-yuanquan-text a.yq2 i { left: 0; right: auto; } .es-yuanquan-text a.yq3 { left: 910px; top: 600px; padding-left: 50px; } .es-yuanquan-text a.yq3 i { left: 0; right: auto; } .es-yuanquan-text a.yq4 { right: 910px; top: 600px; padding-right: 50px; text-align: right; } .es-yuanquan-text a.yq4 i { left: auto; right: 0; } .es-yuanquan-text a.yq5 { right: 883px; top: 280px; padding-right: 50px; text-align: right; } .es-yuanquan-text a.yq5 i { left: auto; right: 0; } .es-yuanquan-product { position: absolute; left: 50%; width: 620px; margin-left: -410px; bottom: 3%; z-index: 10; } .es-yuanquan-product img { display: inline-block; } .es-yuanquan-img { margin: auto; width: 960px; overflow: hidden; } .es-yuanquan-img .bgtext { position: absolute; left: 0; width: 100%; font-size: 200px; top: 50%; margin-top: -120px; color: #fff; text-transform: uppercase; text-align: center; text-shadow: 0px 0px 40px rgba(255, 255, 255, 0.4); } .global-product-certification { position: relative; } .global-product-certification .img img { display: block; width: 100%; height: auto; } .gpc-content { position: absolute; width: 100%; height: 100%; text-align: center; } .gpc-content .title-style h2 { color: #fff; } .gpc-content .title-style .line { margin: 10px auto; } .gpc-content .title-style .text { color: #b8bdc1; line-height: 28px; padding: 10px 0; } .gpc-content-main { margin-top: 50px; overflow: hidden; width: 100%; background: url("../image/advantage2.png") center top no-repeat; padding: 90px 0 50px 0; min-height: 360px; } .gpc-content-btn { padding-top: 40px; overflow: hidden; width: 890px; margin: auto; } .gpc-content-btn a { color: #add0e0; margin: 10px; border: 2px solid #293d53; display: inline-block; vertical-align: middle; font-size: 14px; padding: 10px 30px; border-radius: 100px; } .gpc-content-btn a:hover { color: #95bed3; border: 2px solid #6ec0d3; box-shadow: rgb(107, 236, 255) 0px 0px 20px inset; } .Linefeed { clear: both; } /*盛弘优充*/ .evcharger-youchong { position: relative; margin: 2%; overflow: hidden; } .youchong-content { position: relative; } .youchong-content .text { position: absolute; left: 10%; top: 0; width: 580px; height: 100%; z-index: 10; } .youchong-content .text .title { color: #fff; } .youchong-content .text .title h4 { margin: 5px 0; font-weight: normal; font-size: 16px; opacity: .6; } .youchong-content .text .title h3 { margin: 0; font-size: 40px; } .youchong-content .text .title .line { display: block; width: 60px; background: #00539c; height: 4px; margin: 25px 0; } .youchong-content .text .title h5 { margin: 0; font-size: 16px; line-height: 30px; font-weight: normal; opacity: .6; } .youchong-content .text .txt { color: #fff; padding-top: 15px; overflow: hidden; } .youchong-content .text .txt h4 { margin: 25px 0; font-size: 18px; } .youchong-content .text .txt li { list-style: none; float: left; text-align: center; position: relative; padding: 0 30px; } .youchong-content .text .txt li:nth-child(2) { padding: 0 30px 0 0px; } .youchong-content .text .txt li:last-child { padding: 0 0px 0 30px; } .youchong-content .text .txt li i { display: block; width: 70px; height: 57px; margin: auto; } .youchong-content .text .txt li h5 { margin: 5px 0; font-size: 16px; font-weight: normal; opacity: .6; } .youchong-content .text .btn { margin-top: 50px; } .btn-pdf { display: block; float: left; margin-right: 15px; padding: 15px 20px 15px 30px; font-size: 0; background: #00539c; } .btn-pdf span { color: #fff; font-size: 14px; display: inline-block; vertical-align: middle; margin-right: 10px; } .btn-pdf i { display: inline-block; vertical-align: middle; width: 18px; height: 10px; background: url("../image/right4.png"); } .btn-pdf:hover { background: #008b62; } /*下载中心*/ .download-list-nav { overflow: hidden; padding: 50px 0 0px 0; text-align: center; } .download-list-nav a { font-weight: bold; display: inline-block; font-size: 18px; color: #999; margin: 0 20px; padding: 0 5px; position: relative; padding-bottom: 20px; } .download-list-nav a::after { content: ''; display: none; width: 100%; height: 3px; background: #00539c; position: absolute; left: 0; bottom: 0; } .download-list-nav a.cur::after { display: block; } .download-list-nav a.cur { color: #000; } .download-list-nav a:hover { color: #000; } .download-list { overflow: hidden; padding: 50px 0 40px 0; } .download-list a { margin-bottom: 1%; display: block; position: relative; overflow: hidden; float: left; width: 32.6%; margin-right: 1%; } .download-list a.mr0 { margin-right: 0; } .download-list a .text { position: absolute; z-index: 63; padding: 10%; height: 70%; width: 80%; } .download-list a .text h6 { margin: 0; font-size: 14px; color: #00539c; font-weight: normal; padding-bottom: 15px; } .download-list a .text h3 { margin: 0; font-size: 18px; line-height: 24px; color: #fff; } .download-list a .text h5 { position: absolute; left: 10%; bottom: 15%; font-size: 0; padding-bottom: 10px; display: inline-block; } .download-list a .text h5 i { display: inline-block; vertical-align: middle; margin-right: 10px; background: url("../image/d.png"); width: 14px; height: 16px; } .download-list a .text h5 span { color: #fff; display: inline-block; vertical-align: middle; font-size: 14px; } .download-list a .text h5::after { content: ''; display: block; width: 100%; height: 2px; background: #fff; position: absolute; left: 0; bottom: 0; } .download-list a .img { position: relative; overflow: hidden; } .download-list a .img img { display: block; width: 100%; height: auto; z-index: 13; position: relative; } .download-list a .img img.img-center { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 33; margin: auto; width: auto; height: auto; } .download-list a:hover .text h3 { color: #00539c; } .download-list a:hover .text h5 span { color: #00539c; } .download-list a:hover .text h5 i { background: url("../image/d1.png"); } .download-list a:hover .text h5::after { background: #00539c; } .download-list-bottom { clear: both; } .download-list-bottom a { display: block; position: relative; overflow: hidden; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin-top: -1px; } .download-list-bottom a .text { padding: 25px 0 25px 2%; overflow: hidden; position: relative; z-index: 33; } .download-list-bottom a .text h6 { margin: 0; font-size: 14px; color: #00539c; font-weight: normal; padding-bottom: 15px; } .download-list-bottom a .text h3 { margin: 0; font-size: 18px; line-height: 24px; color: #1a1a1a; } .download-list-bottom a .text h5 { position: absolute; right: 2%; top: 50%; margin-top: -20px; padding: 10px 20px; font-size: 0; border: 1px solid #e5e5e5; text-align: center; } .download-list-bottom a .text h5 i { display: inline-block; vertical-align: middle; margin-right: 10px; background: url("../image/d2.png"); width: 14px; height: 16px; opacity: .5; } .download-list-bottom a .text h5 span { color: #666666; display: inline-block; vertical-align: middle; font-size: 14px; } .download-list-bottom a::after { content: ''; display: block; width: 0; height: 100%; position: absolute; left: 0; top: 0; background: #ecf1ff; -webkit-transition: all .8s ease; -moz-transition: all .8s ease; transition: all .8s ease; } .download-list-bottom a:hover::after { width: 100%; } /*产品详细*/ .product-section {} .product-section .content { width: 75%; } .screen { position: relative; background-repeat: no-repeat; overflow: hidden; } .screen .main {} .screen .title {} .screen .title h3 { margin: 0; font-size: 24px; color: #00539c; } .screen .title h2 { margin: 0; font-size: 60px; } .screen .title h4 { margin: 0; font-size: 48px; color: #fff; } .screen .title .line { width: 80px; height: 4px; background: #00539c; margin: 25px 0; } .screen .title.center { text-align: center; } .screen .title.center .line { margin: 25px auto; } .screen .text { font-size: 16px; line-height: 28px; color: #666666; } .screen .img { position: relative; } .screen .img img { display: block; } .screen .left { width: 50%; float: left; overflow: hidden; } .screen .right { width: 50%; float: right; overflow: hidden; } .screen-1-1 .main, .screen-1-6 .main { width: 600px; height: 100%; position: absolute; top: 0; left: 13%; z-index: 10; } .screen-1-2 .main, .screen-1-4 .main, .screen-1-7 .main { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; text-align: center; } .screen-1-1 .title { background: url("../image/s-t-1.png") left top no-repeat; padding-top: 95px; } .screen-1-1 .text { font-size: 18px; line-height: 32px; } .screen-1-1 .img { position: relative; } .screen-1-1 .img .productimg { width: 60%; height: auto; position: absolute; bottom: 3%; right: -10%; z-index: 10; } .screen-1-2 .main .text { color: #a9aaac; } .screen-1-2 .main .item3 { text-align: center; margin-top: 40px; } .screen-1-2 .main .item3 li { list-style: none; display: inline-block; vertical-align: middle; padding: 0 50px; position: relative; } .screen-1-2 .main .item3 li h3 { margin: 0; font-weight: normal; font-size: 40px; color: #00539c; } .screen-1-2 .main .item3 li span { color: #a9aaac; font-size: 16px; padding: 10px 0; display: block; } .screen-1-2 .main .item3 li::after { content: ''; display: block; width: 1px; height: 100%; background: #fff; position: absolute; right: 0; top: 0; opacity: .1; } .screen-1-2 .main .item3 li:last-child::after { display: none; } .screen-1-2 .main .picain { background: url("../image/s-t-2.png") center no-repeat; padding: 50px 10%; overflow: hidden; margin-top: 100px; text-align: center; } .screen-1-2 .main .picain img:first-child { margin-right: 50px; } .picain .item4 { width: 540px; text-align: left; position: relative; display: inline-block; margin: 0 2%; } .picain .item4 h4 { font-size: 18px; color: #fff; margin: 13px 0; } .picain .item4 .jingdu { margin: 0; font-weight: normal; background: url("../image/jdt1.png") no-repeat; height: 8px; width: 100%; position: relative; } .picain .item4 .jingdu span { display: block; top: 0; left: 0; border-radius: 10px; width: 50%; height: 8px; overflow: hidden; background-image: linear-gradient(to right, #01835c, #24dea7); } .picain .item4 .jingdu i { display: block; width: 70px; height: 70px; background: url("../image/ggg.png") no-repeat; position: absolute; top: 50%; margin-top: -35px; } .picain .item4 h5 { font-size: 18px; margin: 13px 0; font-weight: normal; color: #919296; } .picain .item4 .rightshu { position: absolute; right: 0; top: 30px; } .picain .item4 .rightshu h6 { margin: 0; font-weight: normal; font-size: 14px; color: #919296; } .picain .item4 .rightshu h3 { margin: 0; font-weight: normal; font-size: 22px; color: #fff; } @keyframes gmwidth30 { 0% { width: 0; } 100% { width: 30%; } } @keyframes gmwidth40 { 0% { width: 0; } 100% { width: 40%; } } @keyframes gmwidth62 { 0% { width: 0; } 100% { width: 62%; } } @keyframes gmwidth75 { 0% { width: 0; } 100% { width: 75%; } } @keyframes gmleft23 { 0% { left: 0; opacity: 0; } 100% { left: 23%; opacity: 1; } } @keyframes gmleft33 { 0% { left: 0; opacity: 0; } 100% { left: 33%; opacity: 1; } } @keyframes gmleft55 { 0% { left: 0; opacity: 0; } 100% { left: 55%; opacity: 1; } } @keyframes gmleft65 { 0% { left: 0; opacity: 0; } 100% { left: 68%; opacity: 1; } } .gmwidth30 { -webkit-animation-name: gmwidth30; animation-name: gmwidth30; -webkit-animation-fill-mode: both; animation-fill-mode: both } .gmwidth40 { -webkit-animation-name: gmwidth40; animation-name: gmwidth40; -webkit-animation-fill-mode: both; animation-fill-mode: both } .gmwidth62 { -webkit-animation-name: gmwidth62; animation-name: gmwidth62; -webkit-animation-fill-mode: both; animation-fill-mode: both } .gmwidth75 { -webkit-animation-name: gmwidth75; animation-name: gmwidth75; -webkit-animation-fill-mode: both; animation-fill-mode: both } .gmleft23 { -webkit-animation-name: gmleft23; animation-name: gmleft23; -webkit-animation-fill-mode: both; animation-fill-mode: both } .gmleft33 { -webkit-animation-name: gmleft33; animation-name: gmleft33; -webkit-animation-fill-mode: both; animation-fill-mode: both } .gmleft55 { -webkit-animation-name: gmleft55; animation-name: gmleft55; -webkit-animation-fill-mode: both; animation-fill-mode: both } .gmleft65 { -webkit-animation-name: gmleft65; animation-name: gmleft65; -webkit-animation-fill-mode: both; animation-fill-mode: both } .screen-1-3 .left { background: #303438; position: absolute; left: 0; top: 0; height: 100%; width: 28%; padding: 0 9% 0 13%; } .screen-1-3 .left .text { color: #bebfc0; } .screen-1-3 .left .item3 { margin-top: 40px; width: 461px; } .screen-1-3 .left .item3 a { display: block; position: relative; margin-top: 30px; } .screen-1-3 .left .item3 a h4 { margin: 0; color: #6c6e70; font-size: 18px; } .screen-1-3 .left .item3 a h3 { margin: 10px 0; color: #bebfc0; font-size: 30px; } .screen-1-3 .left .item3 a .progress { position: relative; height: 8px; overflow: hidden; } .screen-1-3 .left .item3 a .progress i { display: block; width: 24%; height: 8px; position: absolute; top: 0; z-index: 1; background-image: linear-gradient(to right, #01835c, #24dea7); border-radius: 20px; } .screen-1-3 .left .item3 a .progress img { display: block; width: 100%; height: auto; } @keyframes gmleft45 { 0% { left: 0; opacity: 0; } 100% { left: 45%; opacity: 1; } } @keyframes gmleft60 { 0% { left: 0; opacity: 0; } 100% { width: 19%; left: 60%; opacity: 1; } } @keyframes gmleft62 { 0% { left: 0; opacity: 0; } 100% { width: 26%; left: 61%; opacity: 1; } } .gmleft45 { -webkit-animation-name: gmleft45; animation-name: gmleft45; -webkit-animation-fill-mode: both; animation-fill-mode: both } .gmleft60 { -webkit-animation-name: gmleft60; animation-name: gmleft60; -webkit-animation-fill-mode: both; animation-fill-mode: both } .gmleft62 { -webkit-animation-name: gmleft62; animation-name: gmleft62; -webkit-animation-fill-mode: both; animation-fill-mode: both } .screen-1-3 .left .item3 a .che { position: absolute; top: 0; right: 0; display: none; } .screen-1-3 .left .item3 a:hover .che { display: block; } .screen-1-3 .left .item3 a:hover h3 { color: #00539c; } .screen-1-3 .left .item3 .txt { color: #6c6e70; font-size: 12px; padding-top: 10px; } .screen-1-3 .right img { display: block; height: 100%; } .screen-1-4 .title h4 { color: #000; margin-bottom: 50px; } .screen-1-4 .text { padding-top: 30px; width: 700px; margin: auto; } .screen-1-4 .text-left { width: 350px; text-align: center; font-size: 16px; line-height: 28px; color: #666666; position: absolute; left: 15%; top: 50%; margin-top: -20px; } .screen-1-4 .text-right { width: 350px; text-align: center; font-size: 16px; line-height: 28px; color: #666666; position: absolute; right: 15%; top: 50%; margin-top: -20px; } .pic-animation { width: 900px; height: 630px; position: absolute; z-index: 10; left: 50%; top: 50%; margin: -315px 0 0 -450px; } .pic-animation-relative { position: relative; width: 100%; height: 100%; } .pic-animation .item { width: 222px; height: 103px; position: absolute; } .pic-animation .item h5 { margin: 0; font-weight: normal; color: #000; font-size: 14px; position: absolute; text-transform: uppercase; } .pic-animation .item .jingdutiao1 { position: absolute; width: 70%; height: 10px; } .pic-animation .item .jingdutiao1 i { display: block; position: absolute; top: 0; left: 0; height: 10px; width: 50%; border-radius: 20px; background-image: linear-gradient(to right, #00feb2, #00c288); } .pic-animation .item .jingdutiao1 span { display: block; height: 10px; width: 100%; background: #cecfe0; border-radius: 20px; } .pic-animation .item .yline1 {} .pic-animation .item.item1 { left: 0; top: 0; } .pic-animation .item.item1 h5 { left: 15px; top: 40px; } .pic-animation .item.item1 .jingdutiao1 { bottom: 20px; left: -95px; } .pic-animation .item.item2 { right: 0; top: 0; } .pic-animation .item.item2 .yline1 { transform: rotateY(180deg); } .pic-animation .item.item2 h5 { right: 15px; top: 40px; } .pic-animation .item.item2 .jingdutiao1 { bottom: 20px; right: -85px; } .pic-animation .item.item3 { left: 0; bottom: 0px; } .pic-animation .item.item3 h5 { left: 15px; bottom: 30px; } .pic-animation .item.item3 .yline1 { transform: rotateY(180deg); transform: rotateX(180deg); } .pic-animation .item.item3 .jingdutiao1 { top: 30px; left: -95px; } .pic-animation .item.item4 { right: 0; bottom: 0px; } .pic-animation .item.item4 h5 { right: 15px; bottom: 30px; } .pic-animation .item.item4 .yline1 { transform: rotate(180deg); } .pic-animation .item.item4 .jingdutiao1 { top: 30px; right: -95px; } .screen-1-5 .main { width: 700px; height: 100%; position: absolute; top: 0; left: 13%; z-index: 10; } .screen-1-5 .text { color: #b9b9bb; } .screen-1-5 .img { position: relative; } .screen-1-5 .dunimg { position: absolute; right: 14%; top: 28%; width: 452px; height: 512px; z-index: 10; -webkit-animation: topdown 4000ms infinite; animation: topdown 4000ms infinite; } @keyframes topdown { 0% { top: 28%; } 50% { top: 32%; } 100% { top: 28%; } } .screen-1-5 .icons8 { overflow: hidden; margin-top: 50px; } .screen-1-5 .icons8 li { list-style: none; float: left; width: 33%; font-size: 0; margin-bottom: 20px; } .screen-1-5 .icons8 li * { transition: all .4s ease; } .screen-1-5 .icons8 li i { display: inline-block; vertical-align: middle; width: 54px; height: 54px; position: relative; border: 1px solid #555561; overflow: hidden; border-radius: 100%; } .screen-1-5 .icons8 li i img { display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; transform: scale(0.9); } .screen-1-5 .icons8 li h4 { margin: 0; font-size: 17px; color: #ccc; display: inline-block; vertical-align: middle; margin-left: 15px; } .screen-1-5 .icons8 li:hover i { border: 1px solid #fff; } .screen-1-5 .icons8 li:hover i img { transform: scale(1); } .screen-1-5 .icons8 li:hover h4 { color: #fff; } .screen-1-6 .main { width: 850px; } .screen-1-6 .title h4 { color: #000; } .screen-1-6 .text { margin-bottom: 100px; } .screen-1-6 .main .pic img { margin-left: -50px; } .screen-1-6 .rightpic { width: 60%; position: absolute; right: 0; top: 0; height: 100%; z-index: 20; } .screen-1-6 .rightpic .item4 { position: absolute; width: 100%; height: 100%; } .screen-1-6 .rightpic .item4 a { display: block; width: 450px; height: 100px; padding: 10px; float: right; clear: both; margin: 35px 7% 35px 0; } .screen-1-6 .rightpic .item4 a:hover { background: url("../image/s-t-6-7.png") no-repeat; background-size: auto 100%; } .screen-1-6 .rightpic .item4 .pic { width: 90px; height: 90px; border-radius: 100%; overflow: hidden; border: 4px solid #c8e2db; float: left; } .screen-1-6 .rightpic .item4 .txt { float: left; width: 250px; padding: 0 10px; } .screen-1-6 .rightpic .item4 .txt h4 { margin: 0; color: #001a12; font-size: 17px; padding: 7px 0; } .screen-1-6 .rightpic .item4 .txt h6 { margin: 0; font-weight: normal; font-size: 12px; line-height: 20px; color: #858c8c; } .screen-1-6 .rightpic .item4 a.item41 { margin: 35px 15% 35px 0; } .screen-1-6 .rightpic .item4 a.item44 { margin: 35px 17% 35px 0; } .screen-1-7 .text { color: #9d9da3; } .screen-1-7 .item3 { text-align: center; margin-top: 50px; overflow: hidden; } .screen-1-7 .item3 a { display: inline-block; vertical-align: middle; width: 400px; height: 400px; position: relative; color: #fff; background: url("../image/s-t-7-1.png") center no-repeat; margin: 0 2%; } .screen-1-7 .item3 a i { display: block; width: 53px; height: 53px; margin: auto; opacity: .8; } .screen-1-7 .item3 a h4 { margin: 10px 0; font-size: 16px; opacity: .6; text-transform: uppercase; } .screen-1-7 .item3 a h3 { margin: 0; font-size: 24px; } .screen-1-7 .item3 a:hover { background: url("../image/s-t-7-2.png") center no-repeat; } .screen-1-7 .item3 a:hover h4 { opacity: 1; color: #00539c; } .screen-1-7 .item3 a:hover i { opacity: 1; } .screen-2-1 .main, .screen-2-3 .main, .screen-2-5 .main { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; text-align: center; } .screen-2-2 .main, .screen-2-4 .main, .screen-2-6 .main { width: 750px; height: 100%; position: absolute; top: 0; left: 13%; z-index: 10; } .screen-2-1 .main .text { margin-bottom: 230px; } .screen-2-1 .main .title { padding-top: 70px; } .screen-2-1 .img, .screen-2-2 .img, .screen-2-4 .img { position: relative; } .screen-2-1 .img .productimg { width: 838px; height: 370px; position: absolute; bottom: -5%; left: 50%; margin-left: -419px; z-index: 10; } .screen-2-2 .text, .screen-2-4 .text { color: #b8b8b9; } .screen-2-2 .img .productimg { width: 622px; height: 589px; position: absolute; top: 50%; margin-top: -294.5px; right: 14%; z-index: 10; } .screen-2-3 .main .title h4, .screen-2-5 .main .title h4 { color: #000; } .screen-2-3 .main .text { margin-bottom: 10px; } .screen-2-3 .main .chemain { margin: auto; overflow: hidden; position: relative; } .screen-2-3 .main .chemain .cheitem5 { text-align: center; position: absolute; width: 1260px; left: 50%; top: 40%; margin: 0 0 0 -630px; } .screen-2-3 .main .chemain .cheitem5 li { list-style: none; display: inline-block; vertical-align: bottom; margin: 0 2%; } .screen-2-3 .main .chemain .cheitem5 li i { display: block; } .screen-2-3 .main .chemain .cheitem5 li i img { transition: all .4s ease; } .screen-2-3 .main .chemain .cheitem5 li h6 { margin: 0; font-weight: normal; font-size: 14px; color: #666666; padding: 10px 0; } .screen-2-3 .main .chemain .cheitem5 li:hover i img { transform: scale(1.1); } .screen-2-4 .img .productimg { width: 637px; height: 716px; position: absolute; top: 10%; right: 11%; z-index: 10; -webkit-animation: topdown2 4000ms infinite; animation: topdown2 4000ms infinite; } @keyframes topdown2 { 0% { top: 10%; } 50% { top: 12%; } 100% { top: 10%; } } .screen-2-5 .productpic { width: 1130px; height: 460px; margin: 50px auto auto; position: relative; overflow: hidden; } .screen-2-5 .productpic div { position: absolute; } .screen-2-5 .productpic .ppic1 { width: 616px; height: 346px; left: 50%; top: 50%; margin: -133px 0 0 -300px; z-index: 10; } .screen-2-5 .productpic .ppic2 { width: 705px; height: 258px; right: -20px; top: 0; z-index: 11; } .screen-2-5 .productpic .ppic3 { width: 468px; height: 298px; left: 0; top: 10%; z-index: 11; } .screen-2-5 .productpic .ppic4 { width: 705px; height: 152px; right: 0; bottom: 18%; z-index: 11; } .screen-2-5 .productpic .ppic5 { width: 278px; height: 166px; left: 25%; bottom: 0; } .screen-2-5 .productpic .ppic5 h5 { margin: 0; font-weight: normal; color: #666666; font-size: 15px; margin-top: -40px; } @keyframes fatopright1 { 0% { left: 50%; bottom: 20%; opacity: 0; } 100% { left: 25%; bottom: 0; opacity: 1; } } .fatopright1 { -webkit-animation-name: fatopright1; animation-name: fatopright1; -webkit-animation-fill-mode: both; animation-fill-mode: both } .screen-2-6 .text { color: #b8b8b9; } .screen-2-6 .img .productimg { width: 520px; height: 502px; position: absolute; top: 50%; margin-top: -251px; right: 15%; z-index: 10; } .jingdutiao8 { width: 520px; position: absolute; right: 15%; top: 50%; z-index: 33; margin-top: -250px; } .jingdutiao8 .item { position: relative; overflow: hidden; margin-bottom: 30px; } .jingdutiao8 .item h4 { display: block; margin: 0; font-weight: normal; } .jingdutiao8 .item h4 span { font-weight: bold; font-size: 15px; color: #dededf; margin-right: 5px; } .jingdutiao8 .item h4 strong { font-weight: normal; font-size: 18px; color: #00539c; } .jingdutiao8 .item .jdt1 { width: 50%; height: 20px; border-radius: 20px; margin: 10px 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5)); } .jingdutiao8 .item .jdt2 { width: 50%; height: 20px; border-radius: 20px; margin: 10px 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #00539c); } @keyframes jdtwidth40 { 0% { width: 0; opacity: 0; } 100% { width: 40%; opacity: 1; } } @keyframes jdtwidth50 { 0% { width: 0; opacity: 0; } 100% { width: 50%; opacity: 1; } } @keyframes jdtwidth48 { 0% { width: 0; opacity: 0; } 100% { width: 47%; opacity: 1; } } @keyframes jdtwidth80 { 0% { width: 0; opacity: 0; } 100% { width: 80%; opacity: 1; } } @keyframes jdtwidth90 { 0% { width: 0; opacity: 0; } 100% { width: 90%; opacity: 1; } } @keyframes jdtwidth100 { 0% { width: 0; opacity: 0; } 100% { width: 100%; opacity: 1; } } .jdtwidth40 { -webkit-animation-name: jdtwidth40; animation-name: jdtwidth40; -webkit-animation-fill-mode: both; animation-fill-mode: both } .jdtwidth50 { -webkit-animation-name: jdtwidth50; animation-name: jdtwidth50; -webkit-animation-fill-mode: both; animation-fill-mode: both } .jdtwidth48 { -webkit-animation-name: jdtwidth48; animation-name: jdtwidth48; -webkit-animation-fill-mode: both; animation-fill-mode: both } .jdtwidth80 { -webkit-animation-name: jdtwidth80; animation-name: jdtwidth80; -webkit-animation-fill-mode: both; animation-fill-mode: both } .jdtwidth90 { -webkit-animation-name: jdtwidth90; animation-name: jdtwidth90; -webkit-animation-fill-mode: both; animation-fill-mode: both } .jdtwidth100 { -webkit-animation-name: jdtwidth100; animation-name: jdtwidth100; -webkit-animation-fill-mode: both; animation-fill-mode: both } .jingdutiao8 .bottom {} .jingdutiao8 .bottom li { font-size: 14px; color: #8e8f91; list-style: none; display: inline-block; vertical-align: middle; position: relative; margin-right: 20px; } .jingdutiao8 .bottom li::before { content: ''; width: 20px; height: 9px; border-radius: 10px; background: #ccc; display: inline-block; vertical-align: baseline; margin-right: 10px; } .jingdutiao8 .bottom li:last-child::before { background: #038566; } .screen-3-1 .main, .screen-3-5 .main, .screen-3-6 .main, .screen-3-8 .main { width: 610px; height: 100%; position: absolute; top: 0; left: 13%; z-index: 10; } .screen-3-3 .main, .screen-3-7 .main { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; text-align: center; } .screen-3-1 .text { font-size: 18px; line-height: 32px; } .screen-3-3 .main .title h4, .screen-3-5 .main .title h4, .screen-3-7 .main .title h4 { color: #000; } .screen-3-4 .text, .screen-3-6 .text, .screen-3-8 .text { color: #b8b8b9; } .screen-3-1 .img, .screen-3-4 .img, .screen-3-5 .img { position: relative; } .screen-3-1 .img .productimg { width: 926px; height: 743px; position: absolute; bottom: -8%; right: 0; z-index: 10; } .screen-3-3 .chedonghua { margin-top: 40px; position: relative; overflow: hidden; text-align: center; } .screen-3-3 .chedonghua .chedatet { width: 502px; display: inline-block; margin: 5px 10px; } .screen-3-3 .chedonghua .chedatet .jindu2 { height: 50px; position: relative; overflow: hidden; background: url('../image/jindu1.png') center no-repeat; } .screen-3-3 .chedonghua .chedatet .jindu2 h6 { width: 104px; height: 24px; right: 5%; top: 50%; margin-top: -12px; display: block; position: absolute; z-index: 1; background: url('../image/Charging.png') no-repeat; } .screen-3-3 .chedonghua .chedatet .jindu2 i { display: block; position: absolute; right: 0; top: 0; height: 50px; width: 40%; background-image: linear-gradient(to right, #2ae4ad, #13b483); border-radius: 3px; overflow: hidden; } .screen-3-3 .chedonghua .chedatet.chedatet2 .jindu2 i { right: auto; left: 0; width: 70%; } .screen-3-3 .chedonghua .chedatet.chedatet2 .jindu2 h6 { right: auto; left: 5%; } @keyframes jdtright40 { 0% { width: 0; opacity: 0; } 100% { width: 40%; opacity: 1; } } @keyframes jdtright70 { 0% { width: 0; opacity: 0; } 100% { width: 70%; opacity: 1; } } .jdtright40 { -webkit-animation-name: jdtright40; animation-name: jdtright40; -webkit-animation-fill-mode: both; animation-fill-mode: both } .jdtright70 { -webkit-animation-name: jdtright70; animation-name: jdtright70; -webkit-animation-fill-mode: both; animation-fill-mode: both } .screen-3-3 .chedonghua .chepicb1 { position: relative; } .screen-3-3 .chedonghua .chepicb1 .chpicl { width: 400px; height: 325px; position: absolute; left: 24%; top: 3%; } .screen-3-3 .chedonghua .chepicb1 .chpicl .chec1 { width: 100%; height: 187px; position: absolute; left: 0; top: 50%; margin-top: -93.5px; z-index: 10; } .screen-3-3 .chedonghua .chepicb1 .chpicl .chec2 { width: 277px; height: 277px; position: absolute; left: 50%; top: 50%; margin: -138.5px 0 0 -138.5px; } .screen-3-3 .chedonghua .chepicb1 .chpicl.chpicl2 { left: auto; right: 24%; } .screen-3-3 .chedonghua .chepicb1 .chpicl.chpicl2 .chec1 { transform: rotateY(180deg); } .screen-3-4 .main { width: 530px; height: 100%; position: absolute; top: 0; left: 13%; z-index: 10; } .screen-3-4 .img .productimg { width: 865px; height: auto; position: absolute; bottom: 10%; right: 1%; z-index: 10; padding: 130px 0 0 50px; } .screen-3-4 .img .productimg img.img-top { position: absolute; left: 0; top: 0; z-index: 11; } .screen-3-4 .item li { list-style: none; margin: 0; padding: 0; margin-bottom: 30px; } .screen-3-4 .item li i { display: block; float: left; width: 35px; margin-right: 10px; } .screen-3-4 .item li h3 { margin: 0; display: block; float: left; width: 70%; color: #fff; } .screen-3-4 .item li p { clear: both; } .screen-3-5 .img .productimg { width: 987px; height: auto; position: absolute; bottom: 0; right: 3%; z-index: 10; } .screen-3-8 .img .productimg { width: 60%; height: auto; position: absolute; bottom: -17%; right: 1%; z-index: 10; } .screen-4-1 .main, .screen-4-3 .main { width: 790px; height: 100%; position: absolute; top: 0; right: 13%; z-index: 10; } .screen-4-2 .main, .screen-4-6 .main { width: 790px; height: 100%; position: absolute; top: 0; left: 13%; z-index: 10; } .screen-4-5 .main { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; text-align: center; } .screen-4-1 .title { background: url("../image/s-4-1-1.png") left top no-repeat; padding-top: 95px; } .screen-4-1 .text { font-size: 18px; line-height: 32px; } .screen-4-2 .text, .screen-4-6 .text { color: #b8b8b9; } .screen-4-3 .main .title h4, .screen-4-5 .main .title h4 { color: #000; } .screen-4-6 .main .item3.date3 span { color: #b8b8b9; } .itempic { overflow: hidden; width: 100%; } .itempic a { display: block; position: relative; width: 35%; float: left; } .itempic a::before { content: ''; display: block; width: 30px; height: 30px; position: absolute; bottom: 5%; right: 5%; background: url("../image/fd.png"); } .date3 { text-align: left; margin-top: 40px; } .date3 li { list-style: none; display: inline-block; vertical-align: top; padding: 0 40px; position: relative; text-align: left; } .date3 li h3 { margin: 0; font-weight: normal; font-size: 40px; color: #00539c; } .date3 li h3 strong { font-size: 60px; } .date3 li h3 i { font-style: normal; font-size: 34px; font-weight: bold; } .date3 li h4 { margin: 0; font-size: 26px; color: #00539c; } .date3 li h6 { color: #a9aaac; font-size: 16px; padding: 10px 0; display: block; margin: 0; } .date3 li::after { content: ''; display: block; width: 1px; height: 100%; background: #fff; position: absolute; right: 0; top: 0; opacity: .1; } .date3 li:last-child::after { display: none; } .date3 li:first-child { padding: 0 40px 0 0px; } .icon4 { text-align: left; margin-top: 40px; } .icon4 li { text-align: center; display: inline-block; vertical-align: middle; padding: 0 20px; position: relative; } .icon4 li i { width: 60px; height: 60px; margin: auto; display: block; position: relative; } .icon4 li span { color: #a9aaac; font-size: 16px; padding: 10px 0; display: block; } .icon4 li::after { content: ''; display: block; width: 1px; height: 100%; background: #fff; position: absolute; right: 0; top: 0; opacity: .1; } .icon4 li:last-child::after { display: none; } .icon4 li:first-child { padding: 0 20px 0 0px; } /*产品详细 产品轮换*/ .screen-7 { background-position: center; background-repeat: no-repeat; } .screen-7 * { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .screen-7 .left { width: 50%; } .screen-7 .swiper-big-img1 {} .screen-7 .swiper-big-img1 .swiper-slide {} .screen-7 .swiper-big-img1 .img { position: relative; } .screen-7 .swiper-big-img1 .img img { display: block; width: 100%; height: auto; } .screen-7 .left-swiper-img { position: absolute; left: 0; top: 0; width: 140px; height: 100%; z-index: 3; background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)); } .screen-7 .swiper-small-img2 { height: 70%; margin: 150px 0 0px 0; overflow: hidden; } .screen-7 .swiper-small-img2 .img { position: relative; cursor: pointer; width: 80%; margin: auto; } .screen-7 .swiper-small-img2 .img img { display: block; width: 100%; height: auto; opacity: .3; } .screen-7 .swiper-small-img2 .swiper-slide-thumb-active .img img { opacity: 1; } .screen-7 .right { width: 48%; padding-bottom: 94px; overflow: hidden; } .screen-7 .swiper-right { margin-top: 94px; color: #000; background: #fff; padding: 0 14.5% 0 13%; position: relative; height: 710px; overflow: hidden; } .screen-7 .swiper-right .swiper-text { height: 100%; } .screen-7 .swiper-right .swiper-text .swiper-wrapper { display: table; width: 100%; height: 100%; } .screen-7 .swiper-right .swiper-text .swiper-wrapper .swiper-slide { display: table-cell; vertical-align: middle; height: auto; } .screen-7 .swiper-right .swiper-text .item { position: relative; } .screen-7 .swiper-right .swiper-text .item .title-1 { border-bottom: 4px solid #000; padding-bottom: 20px; position: relative; } .screen-7 .swiper-right .swiper-text .item .title-1 h3 { font-size: 36px; color: #1a1a1a; margin: 0; text-transform: uppercase; } .screen-7 .swiper-right .swiper-text .item .title-1 h5 { font-size: 20px; color: #00539c; margin: 0; text-transform: uppercase; } .screen-7 .swiper-right .swiper-text .item .text { padding: 30px 0 0 0; overflow: hidden; line-height: 24px; font-size: 14px; color: #666666; } .screen-7 .swiper-right .swiper-text .item .text .rolling-height { height: 420px; } .screen-7 .swiper-right .swiper-text .item .text .rolling-height .rolling1 { padding-right: 3%; width: 95%; } .screen-7 .swiper-right .swiper-text .item .text strong { color: #1a1a1a; } .screen-7 .swiper-right .swiper-text .item .text table tr { margin: 5px 0; vertical-align: top; display: block; } .screen-7 .swiper-right .swiper-text .item .text table tr td:first-child { width: 130px; } .swiper-tab-screen .swiper-button-next, .swiper-tab-screen .swiper-button-prev { width: 100px; height: 60px; bottom: 65px; top: auto; opacity: 1; background-color: #333333; } .swiper-tab-screen .swiper-button-next { right: 7%; left: auto; background-image: url("../image/right1.png"); background-size: auto; } .swiper-tab-screen .swiper-button-prev { right: 12.5%; left: auto; background-image: url("../image/left1.png"); background-size: auto; } .swiper-tab-title { position: absolute; left: 5%; bottom: 5%; width: 620px; height: 100px; } .swiper-tab-title h4 { color: #666; font-size: 14px; text-transform: uppercase; margin: 0; } .swiper-tab-title .swiper-slide { cursor: pointer; } .swiper-tab-title .swiper-slide-thumb-active h4 { color: #fff; } /*产品详细 适用方案*/ .product-applicable-plan { overflow: hidden; padding: 120px 0; } .product-applicable-plan .title { text-align: center; } .product-applicable-plan .title h2 { margin: 0; font-size: 40px; } .product-applicable-plan .title h4 { margin: 10px auto; font-weight: normal; font-size: 16px; color: #999999; } .product-applicable-plan .item2 { text-align: center; overflow: hidden; margin-top: 40px; font-size: 0; } .product-applicable-plan .item2 a { display: inline-block; vertical-align: middle; position: relative; width: 48%; margin: 1%; } .product-applicable-plan .item2 .text { color: #fff; position: absolute; width: 100%; height: 100%; z-index: 10; } .product-applicable-plan .item2 .text i { display: block; position: relative; width: 40px; height: 40px; margin: 10px auto; } .product-applicable-plan .item2 .text i * { color: #fff; fill: #fff; } .product-applicable-plan .item2 .text h4 { margin: 0; font-size: 20px; } .product-applicable-plan .item2 .text .line { width: 55px; height: 4px; background: #00539c; margin: 15px auto; } .product-applicable-plan .item2 .text h6 { margin: 0 auto; font-weight: normal; font-size: 14px; line-height: 24px; width: 70%; opacity: .8; overflow: hidden; height: 0px; } .product-applicable-plan .item2 a:hover .text h6 { height: 75px; } .product-applicable-plan .item2 .img { position: relative; overflow: hidden; } .product-applicable-plan .item2 a:hover .img img.img-center { transform: scale(1.1); } .product-detail .evcharger-our-project { background: #fff; padding: 130px 0; } /*产品详细 模版*/ .detail-template { position: relative; } .detail-template .img { position: relative; } .detail-template .img img { display: block; width: 100%; height: auto; } .detail-template .left { width: 730px; height: 100%; position: absolute; top: 0; left: 13%; z-index: 10; } .detail-template .center { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; text-align: center; } .detail-template .center.top10 { top: 10%; } .detail-template .center.top10 .table, .detail-template .center.top10 .table-cell { display: block; } .detail-template .center .title .line { margin: 25px auto; } .detail-template .center .title.mtop13 { margin-top: 13%; } .detail-template .center .title.mtop10 { margin-top: 10%; } .detail-template .center .title.mtop7 { margin-top: 7%; } .detail-template .center .title.mtop5 { margin-top: 5%; } .detail-template .right { width: 700px; height: 100%; position: absolute; top: 0; right: 10%; z-index: 10; } .detail-template .text { position: relative; font-size: 16px; line-height: 28px; color: #666666; } .detail-template .text.text18 { font-size: 18px; line-height: 32px; } .detail-template .width-main { width: 800px; margin: auto; } .detail-template .picmain { margin-top: 80px; } .detail-template .left .title.mtop13 { margin-top: 70px; } .detail-template .title h2 { margin: 0; font-size: 60px; } .detail-template .title h3 { margin: 0; font-size: 48px; } .detail-template .title .line { width: 80px; height: 4px; background: #00539c; margin: 25px 0; } .detail-template .baise h3, .detail-template .baise h2 { color: #fff; } .detail-template .title h4 { margin: 0; font-size: 24px; color: #00539c; } .detail-template .baise .text { color: #b9babc; } .detail-template .img .product-left-pic1 { position: absolute; bottom: 0; left: 0; z-index: 9; text-align: left; } .detail-template .img .product-right-pic1 { width: 700px; height: auto; position: absolute; bottom: 5%; right: 10%; z-index: 9; text-align: center; } .detail-template .img .product-right-pic2 { position: absolute; bottom: 0; right: 0; z-index: 9; text-align: right; } .detail-template .img .product-right-pic2 img, .detail-template .img .product-left-pic1 img { display: inline-block; width: auto; height: auto; } .detail-template .img .product-right-img1 { width: 650px; height: auto; position: absolute; bottom: 10%; right: 10%; z-index: 9; text-align: right; } .detail-template .img .product-right-img1 img, .detail-template .img .product-right-pic1 img { display: inline-block; width: auto; height: auto; } .detail-template .img .right-img1 { width: 650px; height: auto; position: absolute; top: 21%; right: 10%; z-index: 9; text-align: center; } .detail-template .img .right-img1 img, .detail-template .img .right-img2 img, .detail-template .img .right-ycenter img { display: inline-block; width: auto; height: auto; } .detail-template .img .right-img2 { width: 800px; height: auto; position: absolute; top: 19%; right: 10%; z-index: 9; text-align: center; } .detail-template .img .center-bottom-img1 { width: 100%; height: auto; position: absolute; bottom: 0; left: 0; z-index: 9; text-align: center; } .detail-template .img .right-ycenter { width: 800px; height: 100%; position: absolute; top: 0; right: 5%; z-index: 9; text-align: center; } .detail-template .img .t25 { top: 25%; } .detail-template .img .b0 { bottom: 0; } .detail-template .img .b-5 { bottom: -5%; } .detail-template .img .b-13 { bottom: -13%; } .detail-template .img .b-15 { bottom: -15%; } .detail-template .img .b-20 { bottom: -20%; } .detail-template .img .b-26 { bottom: -26%; } .detail-template .pimg1 { margin-top: 50px; } .detail-template .datepic { margin-top: 30px; } .detail-template .product-left { width: 40%; height: auto; position: absolute; top: 15%; left: 7%; z-index: 9; text-align: center; } .detail-template .product-left.ycenter { height: 100%; top: 0; } .detail-template .product-left .img img { display: inline-block; width: auto; height: auto; } .detail-template .table-right { width: 34%; height: auto; position: absolute; top: 15%; right: 13%; z-index: 9; } .detail-template .table-right.top10 { top: 10%; } .detail-template .table-right.ycenter { height: 100%; top: 0; } .detail-template .table-right .biaoti1 { color: #fff; font-size: 30px; font-weight: bold; } .table-parameter { padding-top: 10px; overflow: hidden; } .table-parameter-nav { padding: 20px 0; overflow: hidden; } .table-parameter-nav.num4 a { width: 23%; } .table-parameter-nav.num4 a:nth-child(3), .table-parameter-nav.num4 a:nth-child(6), .table-parameter-nav.num4 a:nth-child(9) { margin: 0 1% 1% 0; } .table-parameter-nav a { font-size: 14px; color: #939393; width: 31.88%; border-radius: 100px; border: 1px solid #353434; height: 40px; line-height: 40px; text-align: center; display: inline-block; margin: 0 1% 1% 0; } .table-parameter-nav a.cur { color: #fff; border: 1px solid #fff; } .table-parameter-nav a:hover { color: #fff; } .table-parameter-nav a:nth-child(3), .table-parameter-nav a:nth-child(6), .table-parameter-nav a:nth-child(9) { margin: 0 0px 1% 0; } .table-parameter-list { border-top: 2px solid #323131; overflow: hidden; } .parameter-li { overflow: hidden; position: relative; } .parameter-li li { list-style: none; width: 40%; padding: 20px 0; overflow: hidden; font-size: 14px; line-height: 24px; color: #fff; display: block; float: left; border-bottom: 1px solid #323131; margin-right: 10%; } .parameter-li h4 { display: block; margin: 0; color: #fff; border-bottom: 1px solid #323131; padding: 20px 0; font-size: 14px; width: 90%; clear: both; overflow: hidden; } .parameter-li h4:first-child { padding: 0px 0 20px 0; } .scrollh { overflow: auto; height: 550px; margin-top: 30px; } .scrollh::-webkit-scrollbar { height: 4px; width: 2px; background: rgba(255, 255, 255, .2) } .icontxt5 { margin: 20px 0; overflow: hidden; } .icontxt5 h4 { font-size: 18px; padding-bottom: 10px; } .icontxt5 li { position: relative; list-style: none; text-align: center; float: left; padding: 0 4%; } .icontxt5 li::after { content: ''; display: block; width: 1px; height: 100%; position: absolute; right: 0; top: 0; background: #d9dce1; } .icontxt5 li:nth-child(2) { padding: 0 5% 0 0; } .icontxt5 li:last-child::after { display: none; } .icontxt5 li i { display: block; width: 80px; height: 50px; margin: auto; } .icontxt5 li span { display: block; font-size: 16px; color: #666666; } .detail-template .left.baise .icontxt5 li::after { opacity: .2; } .detail-template .left.baise .icontxt5 li span { color: #999; } .detail-template .center.baise .icontxt5 li { float: none; display: inline-block; padding: 0 2%; } .detail-template .center.baise .icontxt5 li:nth-child(2) { padding: 0 2%; } .detail-template .center.baise .icontxt5 li::after { opacity: .2; } .detail-template .center.baise .icontxt5 li span { font-size: 14px; color: #98999a; } .icontxt5.heise li::after { background: #000; opacity: .1; } .mtb40 { margin: 40px 0; } .pt10 { padding-top: 10px; } .pt0 { padding-top: 0px; } .textimg-swiper-pic .pic.pt0 { padding-top: 0px; } .datetxt3 { text-align: center; margin-top: 40px; } .datetxt3 li { position: relative; list-style: none; text-align: center; display: inline-block; padding: 0; width: 30%; } .datetxt3 li::after { content: ''; display: block; width: 1px; height: 92%; position: absolute; right: 0; top: 5px; background: #d9dce1; } .datetxt3 li:last-child::after { display: none; } .datetxt3 li h4 { margin: 0; font-weight: normal; font-size: 30px; color: #00539c; text-transform: uppercase; } .datetxt3 li h4 em { font-style: normal; font-size: 14px; } .datetxt3 li span { font-size: 15px; color: #999999; display: block; padding-top: 10px; overflow: hidden; } .detail-template .baise .datetxt3 li::after { background: #fff; opacity: .1; } .detail-template .left .datetxt3, .detail-template .left .datetxt3 li { text-align: left; vertical-align: top; } .datetxt3.num2 li { width: 40%; padding-left: 5%; } .datetxt3.num2 li:first-child { padding-left: 0; } .datetxt3.num2 li span { color: #666666; } .icontxt4 { margin: 50px 0 0 0; overflow: hidden; text-align: left; } .icontxt4 li { position: relative; list-style: none; float: left; width: 40%; margin-bottom: 20px; } .icontxt4 li i { display: block; width: 50px; height: 50px; margin: 0; position: relative; } .icontxt4 li span { display: block; font-size: 14px; color: #818386; } .icontxt4.style2 li { width: auto; padding: 0 15px; text-align: center; } .icontxt4.style2 li:first-child { padding: 0 15px 0 0px; } .icontxt4.style2 li i { width: auto; } .icontxt4.style2 li span { padding-top: 10px; } .icontxt3 { margin: 50px 0 0 0; overflow: hidden; text-align: left; } .icontxt3 li { position: relative; list-style: none; float: left; margin-bottom: 40px; padding: 0 5%; } .icontxt3 li:first-child, .icontxt3 li:last-child { padding: 0 5% 0 0; } .icontxt3 li:last-child { clear: both; } .icontxt3 li:first-child::after { content: ''; display: block; width: 1px; height: 92%; position: absolute; right: 0; top: 5px; background: #b8bdca; } .icontxt3 li i { display: block; width: 50px; height: 50px; margin: 0; } .icontxt3 li span { display: block; font-size: 14px; color: #666666; } .icontxt2 { margin: 40px 0 0 0; overflow: hidden; text-align: left; } .icontxt2 li { position: relative; list-style: none; margin: 50px 0 0 0; } .icontxt2 li i { display: block; width: 50px; height: 50px; margin: 0; } .icontxt2 li h4 { margin: 0; font-size: 18px; padding-bottom: 10px; } .icontxt2 li span { display: block; font-size: 16px; line-height: 28px; color: #666666; } .textimg-swiper-pic { text-align: center; margin-top: 50px; height: 500px; overflow: hidden; } .textimg-swiper-pic img { display: inline-block; } .textimg-swiper-pic .pic { padding-top: 50px; } .textimg-swiper-pic .pic img { margin: 0 10px; } .textimg-swiper-nav { text-align: center; margin-top: 0px; overflow: hidden; position: absolute; width: 100%; bottom: 10%; z-index: 20; } .textimg-swiper-nav a { display: inline-block; vertical-align: top; min-width: 220px; height: 95px; position: relative; margin: 10px 20px; } .textimg-swiper-nav a::after { content: ''; display: block; width: 100%; height: 3px; background: #ccc; position: absolute; bottom: 0; left: 0; } .textimg-swiper-nav a::before { content: ''; display: none; width: 100%; height: 100%; border: 3px solid #000; position: absolute; bottom: 0; left: 0; z-index: 10; box-sizing: content-box; } .textimg-swiper-nav a.cur::before { display: block; } .textimg-swiper-nav a.cur h5 span { color: #000; } .textimg-swiper-nav a h5 { font-weight: normal; margin: 0; position: absolute; left: 0; bottom: 20%; width: 100%; text-align: center; } .textimg-swiper-nav a span { font-size: 16px; color: #666666; line-height: 28px; display: inline-block; text-align: left; } .textimg-swiper-nav.h45px a { height: 45px; } .textimg-swiper-nav.h45px a h5 { bottom: 27%; } .textimg-swiper-pic.hauto { height: auto; } .textimg-swiper-pic.h100 { height: 100%; } .textimg-swiper-nav.h45px a::after { background: #000; opacity: .1; } .global-product-certification-iconbtn { margin-top: 50px; overflow: hidden; width: 100%; background: url("../image/bg.png") center top no-repeat; padding: 90px 0 50px 0; min-height: 360px; } .global-product-certification-iconbtn .content-btn { padding-top: 40px; overflow: hidden; width: 890px; margin: auto; } .global-product-certification-iconbtn .content-btn a { color: #435261; margin: 10px; border: 2px solid #a0b0bf; display: inline-block; vertical-align: middle; font-size: 14px; padding: 10px 30px; border-radius: 100px; } .global-product-certification-iconbtn .content-btn a:hover { color: #c8e3ef; border: 2px solid #2778c9; background: #2778c9; } .fcs10-main { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; } .fcs10-main-bottom { width: 1440px; position: absolute; left: 50%; bottom: 5%; margin-left: -700px; } .fcs10-main-bottom li { display: block; list-style: none; padding: 20px 0; float: left; width: 30%; margin-right: 3.3%; margin-bottom: 1%; border-bottom: 2px solid #e5e5e6; } .fcs10-main-bottom li i { display: inline-block; vertical-align: middle; margin-right: 20px; } .fcs10-main-bottom li h5 { display: inline-block; vertical-align: middle; margin: 0; font-weight: normal; font-size: 16px; } .fcs10-main-bottom li:nth-child(3), .fcs10-main-bottom li:nth-child(6) { margin-right: 0; } .fcs10-main-top { width: 1440px; margin: auto; position: relative; } .fcs-img { width: 960px; margin: auto; } .fcs10-main-top .fcsitem3 { width: 650px; height: 540px; position: absolute; left: 50%; top: 50%; margin: -270px 0 0 -325px; } .fcs10-main-top .fcsitem3 .item { position: absolute; display: block; z-index: 15; } .fcs10-main-top .fcsitem3 .item em { display: block; width: 8px; height: 8px; background: #000; position: absolute; right: 5px; top: 13px; border-radius: 100%; opacity: .5; } .fcs10-main-top .fcsitem3 .item em::after { content: ''; display: block; width: 16px; height: 16px; position: absolute; right: -5px; top: -5px; border-radius: 100%; border: 1px solid #000; } .fcs10-main-top .fcsitem3 .item h3 { margin: 0; margin-bottom: 10px; border: 2px solid #ccc; padding: 7px 20px; ; position: relative; font-size: 0; display: inline-block; overflow: hidden; } .fcs10-main-top .fcsitem3 .item h3 i { display: inline-block; vertical-align: middle; margin-right: 10px; } .fcs10-main-top .fcsitem3 .item h3 span { display: inline-block; vertical-align: middle; font-size: 17px; } .fcs10-main-top .fcsitem3 .item h6 { color: #666666; font-size: 15px; font-weight: normal; margin: 0; line-height: 26px; } .fcs10-main-top .fcsitem3 .item:hover h3 { border: 2px solid #000; } .fcs10-main-top .fcsitem3 .item:hover em { opacity: 1; } .fcs10-main-top .fcsitem3 .item.item1 { left: 0; top: -130px; width: 100%; text-align: center; } .fcs10-main-top .fcsitem3 .item.item1 em { right: 50%; top: auto; bottom: -23px; margin-right: -10px; } .fcs10-main-top .fcsitem3 .item.item2 { left: 615px; right: auto; top: 300px; width: 250px; padding-left: 40px; text-align: left; } .fcs10-main-top .fcsitem3 .item.item2 em { left: 0; right: auto; } .fcs10-main-top .fcsitem3 .item.item3 { left: auto; right: 610px; top: 300px; width: 450px; text-align: right; padding-right: 40px; } .iconpic4 { overflow: hidden; margin-top: 40px; } .iconpic4 img { margin-right: 5%; display: block; float: left; } /*页面广告*/ .page-banner { position: relative; background: #000; } .page-banner .text { position: absolute; left: 12.5%; top: 0; height: 100%; z-index: 1; } .page-banner .text h5 { font-size: 16px; color: #00539c; margin: 0; text-transform: uppercase; margin-top: 80px; } .page-banner .text h3 { font-size: 60px; color: #fff; margin: 2px 0; text-transform: uppercase; margin-top: 50px; opacity: .1; } .page-banner .text h2 { font-size: 40px; color: #fff; margin: 2px 0; text-transform: uppercase; } .page-banner .text .line { width: 80px; height: 4px; background: #00539c; margin: 15px 0; } .page-banner .text h6 { font-size: 16px; color: #fff; opacity: .6; margin: 15px 0; width: 80%; line-height: 26px; } .page-banner .img { background-position: center; background-repeat: no-repeat; background-size: auto; } .page-banner .img img { display: block; width: 100%; height: auto; opacity: 0; } .interesting-list-nav { padding-top: 40px; overflow: hidden; text-align: center; } .interesting-nav { padding: 20px 0; position: relative; margin: auto; display: inline-block; } .interesting-nav::after { content: ''; width: 100%; height: 3px; background: #ccc; bottom: 0; position: absolute; right: 0; } .interesting-list-nav a { font-size: 17px; color: #999999; font-weight: bold; margin-left: 50px; position: relative; } .interesting-list-nav a.cur::after { content: ''; width: 100%; height: 3px; background: #00539c; bottom: -21px; position: absolute; right: 0; z-index: 1; } .interesting-list-nav a:first-child { margin-left: 0; } .interesting-list-nav a.cur { color: #1a1a1a; } .interesting-list-nav a:hover { color: #000; } .interesting-list { overflow: hidden; padding: 40px 0; } .interesting-list a { width: 32.6666%; float: left; background: #f7f7f7; margin-right: 1%; margin-bottom: 1%; display: block; position: relative; overflow: hidden; } .interesting-list a.mr0 { margin-right: 0; } .interesting-list a .text { position: relative; bottom: auto; width: 90%; padding: 6.2% 6.2% 3.2% 6.2%; left: auto; color: #000000; height: 90px; } .interesting-list a .text h3 { margin: 0; font-size: 18px; line-height: 26px; margin-bottom: 10px; } .interesting-list a .text h6 { margin: 0; font-size: 14px; color: #999999; font-weight: normal; } .interesting-list a .img { position: relative; overflow: hidden; } .interesting-list a .img img { display: block; width: 100%; height: auto; z-index: 13; position: relative; } .interesting-list a .img img.img-center { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 33; margin: auto; width: auto; height: auto; } .interesting-list a:hover .img img.img-center { opacity: .5; transform: scale(1.1); } .turnpage { display: flex; display: -webkit-flex; justify-content: center; width: 100%; margin: 3% 0% 0% } .turnpage a { vertical-align: middle; font-size: 14px !important; display: inline-block; padding: 0px 20px; height: 41px; line-height: 41px; text-align: center; color: #000000 !important; font-size: 0px; border: 1px solid #ededed; background: white; } .turnpage .page-num-current { background: #00539c; border: 1px solid #00539c; color: #fff !important; } .turnpage a i { width: 18px; height: 10px; opacity: .3; display: inline-block; vertical-align: middle; margin: 0 5px; } .turnpage a.prev i { background: url("../image/left3.png"); } .turnpage a.next i { background: url("../image/right31.png"); } .turnpage a span { display: inline-block; vertical-align: middle; font-size: 14px; } .turnpage a.cur { background: #00539c; border: 1px solid #00539c; color: #fff; } .turnpage a:hover { background: #00539c; border: 1px solid #00539c; } .turnpage a:hover span { color: #fff; } .turnpage a.prev:hover i { background: url("../image/left4.png"); opacity: 1; } .turnpage a.next:hover i { background: url("../image/right4.png"); opacity: 1; } .page-path { background: #f7f7f7; } .page-path .content { font-family: "宋体", Arial; padding: 15px 0; color: #999; } .page-path a { font-size: 12px; color: #999999; } .page-path a:hover { color: #000; } .interesting-detail { width: 80%; margin: auto; padding: 100px 0; overflow: hidden; } .interesting-detail-title { position: relative; padding-bottom: 15px; overflow: hidden; } .interesting-detail-title h5 { font-weight: normal; font-size: 16px; color: #00539c; margin: 0; } .interesting-detail-title h1 { font-size: 30px; color: #000000; margin: 10px 0; } .interesting-detail-title::before, .interesting-detail-title::after { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #e5e5e5; } .interesting-detail-title::before { width: 140px; background: #00539c; z-index: 3; } .interesting-detail-text { padding: 30px 0; overflow: hidden; color: #585858; line-height: 30px; font-size: 16px; } .interesting-detail-turnpage { overflow: hidden; border-top: 2px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; position: relative; margin-top: 30px; } .interesting-detail-turnpage a { display: block; width: 40%; font-size: 0; padding: 25px 0; overflow: hidden; } .interesting-detail-turnpage a i { display: inline-block; vertical-align: middle; width: 18px; height: 10px; margin: 0 5px; opacity: .3; } .interesting-detail-turnpage a span { display: inline-block; vertical-align: middle; font-size: 14px; color: #666; text-transform: uppercase; font-weight: bold; } .interesting-detail-turnpage a.prev { float: left; } .interesting-detail-turnpage a.prev i { background: url("../image/left3.png"); } .interesting-detail-turnpage a.return { position: absolute; width: 100px; text-align: center; left: 50%; margin-left: -50px; top: 50%; margin-top: -34px; } .interesting-detail-turnpage a.next { float: right; text-align: right; } .interesting-detail-turnpage a.next i { background: url("../image/right31.png"); } .interesting-detail-turnpage a:hover span { color: #00539c; } .interesting-other { padding: 100px 0; overflow: hidden; } .interesting-other .title-style { text-align: center; } .interesting-other .title-style h2 { margin: 0; } .interesting-other .title-style h5 { margin: 0; font-size: 16px; color: #999; } .interesting-other .interesting-list a .text { background: #fff; } .video-list { overflow: hidden; padding: 60px 0 40px 0; } .video-list a { width: 32.6666%; float: left; background: #f7f7f7; margin-right: 1%; margin-bottom: 1%; display: block; position: relative; overflow: hidden; } .video-list a.mr0 { margin-right: 0; } .video-list a .text { position: relative; bottom: auto; width: 90%; padding: 5% 5% 3% 5%; left: auto; color: #000000; height: 100px; } .video-list a .text h6 { margin: 0; font-size: 14px; color: #00539c; font-weight: normal; padding-bottom: 10px; } .video-list a .text h3 { margin: 0; font-size: 18px; line-height: 24px; } .video-list a .img { position: relative; overflow: hidden; } .video-list a .img .play { width: 50px; height: 50px; border: 1px solid #fff; position: absolute; left: 50%; top: 50%; margin: -27px 0 0 -27px; z-index: 38; } .video-list a .img .play i { width: 50px; height: 50px; background: url("../image/play.png") center no-repeat; display: block; } .video-list a .img img { display: block; width: 100%; height: auto; z-index: 13; position: relative; } .video-list a .img img.img-center { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 33; margin: auto; width: auto; height: auto; } .video-list a:hover .img img.img-center { opacity: .5; transform: scale(1.1); } .video-list-bottom { overflow: hidden; padding: 40px 0 40px 0; } .video-list-bottom a { margin-right: 2%; margin-bottom: -1px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; display: block; position: relative; overflow: hidden; width: 49%; padding: 20px 0; float: left; } .video-list-bottom a.mr0 { margin-right: 0; } .video-list-bottom a .img { position: relative; overflow: hidden; width: 25%; background: #000; } .video-list-bottom a .img .play { width: 40px; height: 40px; border: 1px solid #fff; position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -22px; z-index: 38; } .video-list-bottom a .img .play i { width: 40px; height: 40px; background: url("../image/play.png") center no-repeat; display: block; } .video-list-bottom a .img img { display: block; width: 100%; height: auto; z-index: 13; position: relative; } .video-list-bottom a .img img.img-center { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 33; margin: auto; width: auto; height: auto; opacity: .5; } .video-list-bottom a .text { position: absolute; right: 0; width: 60%; height: 100%; padding-right: 10%; top: 0; z-index: 3; } .video-list-bottom a .text h6 { margin: 0; font-size: 14px; color: #00539c; font-weight: normal; padding-bottom: 10px; } .video-list-bottom a .text h3 { margin: 0; font-size: 18px; line-height: 24px; } .video-list-bottom a .text i { background: url("../image/right31.png"); display: block; width: 18px; height: 10px; position: absolute; right: 5%; top: 50%; margin-top: -5px; opacity: .3; } .video-list-bottom a::after { content: ''; display: block; width: 0; height: 100%; position: absolute; left: 0; top: 0; background: #f2fcf9; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; } .video-list-bottom a:hover::after { width: 100%; } .video-list-bottom a:hover .text i { right: 2%; } .no-content { text-align: center; overflow: hidden; padding: 5% 0; } .no-content img { display: inline-block; } /* about */ .about-sinexcel { position: relative; } .about-sinexcel .text { position: absolute; width: 100%; height: 100%; } .about-sinexcel .text .title-style { text-align: center; } .about-sinexcel .text .title-style h4 { font-size: 16px; padding-bottom: 10px; } .about-sinexcel .text .title-style h2 { color: #fff; font-size: 60px; line-height: 76px; } .about-sinexcel .scroll-down { position: absolute; bottom: 0; left: 50%; margin-left: -70px; width: 140px; text-align: center; } .about-sinexcel .scroll-down span { font-size: 12px; color: #fff; display: block; margin: auto; } .about-sinexcel .scroll-down i { height: 40px; width: 1px; display: block; margin: 10px auto auto; background: #fff; opacity: .5; } .about-sinexcel .img {} .about-sinexcel .img img { display: block; width: 100%; } .about-ours { position: relative; } .about-ours .absolute { position: absolute; height: 100%; width: 80%; left: 10%; } .about-ours .left { width: 40%; margin-top: 2%; margin-left: 5%; margin-bottom: 5%; } .about-ours .left .title-style h5 { font-size: 16px; line-height: 24px; color: #999999; } .about-ours .left .title-style h2 { margin: 0px 0 20px 0; } .about-ours .left .text { font-size: 16px; color: #666; line-height: 28px; margin-top: 20px; } .about-ours .left .text .item3 { margin-top: 40px; } .about-ours .left .text .item3 li { width: 20%; font-size: 14px; line-height: 24px; color: #999999; list-style: none; display: inline-block; vertical-align: top; position: relative; padding-left: 30px; } .about-ours .left .text .item3 li h3 { font-size: 40px; line-height: 26px; color: #00539c; margin: 10px 0; } .about-ours .left .text .item3 li span { color: #666; font-size: 16px; } .about-ours .left .text .item3 li:first-child { padding-left: 0px; } .about-ours .left .text .item3 li::after { content: ''; display: block; width: 1px; height: 100%; background: #ccc; position: absolute; right: 0; top: 0; opacity: .5; } .about-ours .left .text .item3 li:last-child::after { display: none; } .about-ours .right { width: 45%; position: relative; top: 14%; text-align: center; } .about-ours .right .slogo { width: 420px; height: 59px; position: absolute; left: 55%; top: 27%; margin-left: -232.5px; text-align: center; animation: icons 4s linear infinite; -webkit-animation: icons 4s linear infinite } .about-ours .right .slogo img { display: inline-block; } .about-ours .img img { display: block; width: 100%; } @-webkit-keyframes icons { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { -webkit-transform: translate(0, 1em); transform: translate(0, 1em); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes icons { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { -webkit-transform: translate(0, 1em); transform: translate(0, 1em); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .about-company-qualification { position: relative; } .about-company-qualification .main { width: 550px; height: 100%; position: absolute; top: 0; right: 15%; z-index: 10; } .about-company-qualification .main .title { color: #fff; } .about-company-qualification .main .title h4 { font-size: 40px; margin: 0; } .about-company-qualification .main .title .line { width: 80px; height: 4px; background: #00539c; margin: 25px 0; } .about-company-qualification .main .text { font-size: 16px; line-height: 28px; color: #b9b9b9; } .about-company-qualification .main .date3 li span { padding: 0; color: #b9b9b9; } .about-company-qualification .img img { width: 100%; } .core-competence { position: relative; } .core-competence .absolute { position: absolute; height: 100%; width: 90%; left: 5%; text-align: center; } .core-competence .absolute .title-style h2 { margin: 0; } .core-competence .absolute .title-style h5 { color: 999999; font-size: 16px; } .core-competence .absolute .item3 { margin-top: 50px; } .core-competence .absolute .item3 .item { display: inline-block; vertical-align: top; width: 25%; position: relative; padding: 30px 0; } .core-competence .absolute .item3 .item::after { content: ''; display: block; position: absolute; width: 1px; height: 100%; background: #d9dbdb; top: 0; right: 0; } .core-competence .absolute .item3 .item:last-child::after { display: none; } .core-competence .absolute .item3 .item i { display: inline-block; } .core-competence .absolute .item3 .item h3 { font-size: 18px; color: #1a1a1a; margin: 20px 0; } .core-competence .absolute .item3 .item h5 { width: 80%; font-size: 14px; line-height: 22px; opacity: .6; font-weight: normal; color: #1a1a1a; margin: 0 auto; min-height: 100px; } .core-competence .img img { display: block; width: 100%; } .company-culture { position: relative; } .company-culture .absolute { position: absolute; height: 100%; width: 100%; text-align: center; z-index: 10; } .company-culture .absolute .title-style { margin-top: 100px; } .company-culture .absolute .title-style h2 { color: #fff; margin: 0; } .company-culture .absolute .title-style h5 { color: 999999; font-size: 16px; } .company-culture .absolute .img { position: relative; height: 690px; } .company-culture .absolute .img img { display: inline-block; width: auto; } .company-culture .img.bg-black { background: #000; } .company-culture .img.bg-black img.pcshow { animation: fadeintm 1000ms linear infinite; } .company-culture .img img { display: block; width: 100%; } .company-culture .slogoimg { width: 280px; height: 60px; position: absolute; top: 50%; left: 50%; margin: -35px 0 0 -140px; -webkit-animation: fudong1 4s linear infinite; animation: fudong1 4s linear infinite; } .company-culture .absolute .item { width: 410px; height: 205px; position: absolute; } .company-culture .absolute .item .pcontent { position: relative; width: 100%; height: 100%; overflow: hidden; } .ewmright { float: left; } .ewmright, .ewmleft { margin-left: 14%; } .ewmright div, .ewmleft div { text-align: center; } .company-culture .absolute .item .text1 { text-align: left; width: 310px; position: absolute; top: 22%; left: 12%; z-index: 5; } .company-culture .absolute .item .text1 h3 { font-size: 20px; color: #fff; } .company-culture .absolute .item .text1 h6 { margin: 0; font-weight: normal; font-size: 16px; line-height: 26px; color: #b8bfc4; } .company-culture .absolute .item .ypic1 { width: 205px; height: 205px; position: absolute; left: 0; top: 0; z-index: 1; } .company-culture .absolute .item .ypic2 { width: 205px; height: 205px; position: absolute; left: 0; top: 0; } .company-culture .absolute .item.item1 { top: 15%; right: 45%; margin: -20px -500px 0 0; } .company-culture .absolute .item.item2 { top: 35%; left: 45%; margin: -20px 0 0 -600px; } .company-culture .absolute .item.item2 .text1 { top: 23%; left: auto; right: 11%; text-align: right; } .company-culture .absolute .item.item2 .ypic1 { left: auto; right: 0; -webkit-transform: rotate(140deg); transform: rotate(140deg); } .company-culture .absolute .item.item2 .ypic2 { left: auto; right: 0; -webkit-transform: rotate(140deg); transform: rotate(140deg); } .company-culture .absolute .item.item3 { bottom: 5%; right: 45%; margin: -20px -400px 0 0; } .company-culture .absolute .item.item3 .text1 { top: 25%; } @keyframes fudong1 { 0% { top: 50%; } 50% { top: 52%; } 100% { top: 50%; } } @keyframes fadeintm { 0% { opacity: 1; } 50% { opacity: .8; } 100% { opacity: 1; } } .about-global { position: relative; } .about-global .img { position: relative; } .about-global .img img { display: block; width: 100%; height: auto; } .about-global .top { position: absolute; left: 12.5%; width: 75%; top: 0; height: 100%; z-index: 3; } .about-global .top .left { color: #fff; width: 45%; height: 100%; } .about-global .top .left .title-style {} .about-global .top .left .title-style h2 { color: #fff; } .about-global .top .left .title-style h5 { color: #fff; font-size: 20px; font-weight: bold; margin: 20px 0 10px 0; } .about-global .top .left .text { font-size: 16px; line-height: 26px; color: #bab7b7; padding: 20px 0; overflow: hidden; } .about-global .top .right { width: 50%; height: 100%; position: relative; } .about-global .top .right .img { position: relative; } .about-global .top .right .img img {} .about-global .top .right .img .place { position: absolute; width: 100%; height: 100%; } .about-global .top .right .img .place a { display: inline-block; position: relative; position: absolute; } .about-global .top .right .img .place a .item { font-size: 0; } .about-global .top .right .img .place a .item i { display: inline-block; vertical-align: middle; margin-right: 10px; width: 5px; height: 5px; background: #00539c; border-radius: 10px; position: relative; z-index: 3; } .about-global .top .right .img .place a .item i::after { content: ''; display: block; width: 20px; height: 20px; border-radius: 100px; background: #00539c; opacity: .7; z-index: 1; position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -10px; } .about-global .top .right .img .place a .item h6 { color: #fff; font-weight: normal; margin: 0; font-size: 14px; display: inline-block; vertical-align: middle; } .shenzhen { top: 24%; left: 52%; } .huizhou { top: 20%; left: 54%; } .suzhou { top: 15.5%; left: 58%; } .xian { top: 15.5%; left: 43%; } .india { top: 38.5%; left: 22.5%; } .usa { top: 25%; left: 92%; } .shenzhen i::after { -webkit-animation: place100 4000ms infinite; animation: place100 4000ms infinite; } .huizhou i::after { -webkit-animation: place100 3000ms infinite; animation: place100 3000ms infinite; } .suzhou i::after { -webkit-animation: place100 2000ms infinite; animation: place100 2000ms infinite; } .xian i::after { -webkit-animation: place100 3000ms infinite; animation: place100 3000ms infinite; } .india i::after { -webkit-animation: place100 5000ms infinite; animation: place100 5000ms infinite; } .usa i::after { -webkit-animation: place100 3000ms infinite; animation: place100 3000ms infinite; } @keyframes place100 { 0% { width: 0px; height: 0px; margin: 0px; } 100% { width: 40px; height: 40px; margin: -20px 0 0 -20px; opacity: 0; } } .about-global .top .right .img .place a .text { font-size: 12px; line-height: 22px; padding: 30px; color: #fff; width: 300px; position: absolute; left: -140px; top: 40px; ; background-image: linear-gradient(rgba(0, 190, 134, 0.4), rgba(0, 0, 0, 0.1)); display: none; } .about-global .top .right .img .place a .text::before { content: ''; display: block; width: 31px; height: 17px; position: absolute; top: -17px; left: 43%; background: url("../image/ts.png") center no-repeat; } .about-global .top .right .img .place a:hover .text { display: block; } .about-global .top .right .img .place a:hover { z-index: 999; } .development-history {} .development-history .top { position: absolute; width: 100%; height: 100%; } .development-history .top .title-style { text-align: center; width: 30%; margin: 150px auto auto; } .development-history .top .title-style h2 { margin: 0; } .development-history .top .title-style h5 { color: 999999; font-size: 16px; } .swiper-history .swiper-history-time { text-align: center; background: url("../image/line.png") center no-repeat; } .swiper-history .swiper-history-time .year-num { font-size: 40px; color: #808080; } .swiper-history .swiper-history-time .year-num span { color: #808080; } .swiper-history .swiper-history-time .text { font-size: 18px; line-height: 28px; color: #666; margin: auto; overflow: hidden; display: none; } .swiper-history .swiper-history-time .swiper-slide-active .year-num { font-size: 250px; color: #808080; padding-top: 40px; } .swiper-history .swiper-history-time .swiper-slide-active .year-num span { color: #00539c; } .swiper-history .swiper-history-time .swiper-slide-active .text { display: block; height: 130px; } .swiper-history .swiper-history-time .swiper-button-next, .swiper-history .swiper-history-time .swiper-button-prev { background-color: #fff; width: 50px; height: 50px; border-radius: 100%; border: 2px solid #ccc; opacity: 1; } .swiper-history .swiper-history-time .swiper-button-next { right: 18%; background: url("../image/right5.png") center no-repeat; } .swiper-history .swiper-history-time .swiper-button-prev { left: 18%; background: url("../image/left.png") center no-repeat; } .company-honor { overflow: hidden; padding: 200px 0 100px 0; position: relative; } .company-honor .title-style { margin-left: 13%; } .company-honor .title-style h2 { margin: 0; } .company-honor .title-style h5 { color: 999999; font-size: 16px; } .company-honor-swiper { width: 100%; height: 350px; margin: auto; background: url("../image/honort.png") center bottom repeat-x; margin-top: 100px; padding-bottom: 40px; } .company-honor-swiper .swiper-slide { width: auto; height: 300px; display: table; } .table-bottom { display: table-cell; vertical-align: bottom; } .honor-img { overflow: hidden; display: block; position: relative; max-width: 221px; } .honor-img .htop { height: 7px; width: 100%; background: url("../image/honor1.png") no-repeat; background-size: 100% 100%; } .honor-img .hbottom { height: 27px; width: 100%; background: url("../image/honor3.png") no-repeat; background-size: 100% 100%; } .honor-img .hcenter { padding: 0px 7px; background: url("../image/honor2.png") no-repeat; background-size: 100% 100%; } .honor-img .hcenter img { display: block; } .honor-img a { display: block; } .honor-img a::before { content: ''; width: 50px; height: 50px; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -35px; z-index: 10; background: url("../image/fd1.png") no-repeat; display: none; } .honor-img a:hover::before { display: block; } .honor-img a:hover { opacity: .6; } .rpagination { position: relative; height: 40px; } .swiper-r { position: absolute; right: 13%; top: 25%; width: 400px; } .swiper-pagination-progressbar { width: 100%; height: 3px; background: rgba(0, 0, 0, .1); margin-top: 10px; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #00539c; } .swiper-pagination-num #current { font-size: 24px; color: #000; } .swiper-pagination-num { font-size: 14px; color: #b2b2b2; } .lbtip { width: 112px; height: 26px; position: absolute; left: 13%; bottom: 10%; } /* investors */ .investors-relations { position: relative; } .investors-relations .main { position: absolute; width: 100%; height: 100%; } .investors-relations .main .title-style { text-align: center; } .investors-relations .main .title-style h4 { margin: 0; font-size: 60px; font-weight: normal; color: #203346; } .investors-relations .main .title-style .line { width: 80px; height: 4px; background: #00539c; margin: 25px auto; } .investors-relations .main .title-style h2 { margin: 0; font-size: 40px; color: #fff; } .investors-relations .img img { display: block; width: 100%; height: auto; } .investors-date { background: rgba(77, 108, 163, .15); overflow: hidden; margin: 50px auto auto; width: 65%; padding: 5%; } .investors-date .left { float: left; width: 34%; position: relative; overflow: hidden; padding: 1% 0; } .investors-date .left::after { content: ''; display: block; width: 1px; height: 100%; background: #fff; position: absolute; right: 0; top: 0; opacity: .1; } .investors-date .left .ld1 { font-size: 16px; color: #5f656f; } .investors-date .left .ld2 {} .investors-date .left .ld2 span { font-size: 14px; color: #fff; } .investors-date .left .ld2 .txt1 { font-size: 70px; } .investors-date .left .ld2 .txt3 { font-size: 20px; color: #ff4040; padding-left: 10px; } .investors-date .left .ld3 { font-size: 12px; color: #5f656f; } .investors-date .right { float: left; width: 65%; text-align: right; padding-top: 3%; } .investors-date .right li { list-style: none; display: inline-block; vertical-align: middle; width: 20%; text-align: left; } .investors-date .right li span { color: #91959a; font-size: 14px; } .investors-date .right li h3 { color: #fff; margin: 10px 0; } .investors-date .right li h3 strong { font-size: 30px; } .investors-date .right li h3 i { font-size: 14px; font-style: normal; padding-left: 5px; } .announcement { padding: 100px 0 50px 0; overflow: hidden; } .announcement .title-style { text-align: center; } .announcement .title-style h2 { margin: 0; } .announcement .title-style h5 { color: #999999; font-size: 16px; } .announcement-list { padding: 40px 0; overflow: hidden; } .announcement-list li { display: block; position: relative; overflow: hidden; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin-top: -1px; } .announcement-list li a { padding: 25px 0 25px 2%; overflow: hidden; position: relative; z-index: 33; display: block; } .announcement-list li a h6, .announcement-list li a h3, .announcement-list li a h5 { z-index: 11; position: relative; } .announcement-list li a h6 { margin: 0; font-size: 14px; color: #00539c; font-weight: normal; padding-bottom: 10px; } .announcement-list li a h3 { margin: 0; font-size: 18px; line-height: 24px; color: #1a1a1a; font-weight: normal; } .announcement-list li a:hover h3 { color: #009266; } .announcement-list li a h5 { position: absolute; right: 2%; top: 50%; width: 100px; height: 26px; font-weight: normal; margin-top: -10px; font-size: 14px; color: #999; text-align: center; } .announcement-list li a::after { content: ''; display: block; width: 0; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background: #f2fcf9; -webkit-transition: all .8s ease; -moz-transition: all .8s ease; transition: all .8s ease; } .announcement-list li a:hover::after { width: 100%; } .viewmore { margin: 10px auto; } .viewmore a { display: block; width: 100px; margin: auto; padding: 15px 20px 15px 30px; text-align: center; font-size: 0; background: #00539c; } .viewmore a i { width: 14px; height: 20px; display: inline-block; vertical-align: middle; background: url("../image/right.png") center no-repeat; margin-left: 10px; } .viewmore a span { display: inline-block; vertical-align: middle; font-size: 14px; color: #fff; } .viewmore a:hover { background: #009266 } /* service */ .service-support { padding: 100px 0; overflow: hidden; } .service-support .left { float: left; width: 49%; overflow: hidden; } .service-support .left .title {} .service-support .left .title h3 { font-size: 30px; } .service-support .left .title .line { width: 80px; height: 4px; background: #00539c; margin: 25px 0; } .service-support .left .text { color: #666; font-size: 14px; line-height: 24px; } .service-support .left .text strong { color: #000; font-size: 20px; } .service-support .right { float: left; width: 49%; overflow: hidden; } .service-support .right .item3 { clear: both; border-bottom: 1px solid #dcdddf; overflow: hidden; padding: 30px 0; } .service-support .right .item3 .title { float: left; width: 30%; } .service-support .right .item3 .title i { display: inline-block; vertical-align: middle; position: relative; width: 50px; height: 50px; } .service-support .right .item3 .title h4 { display: inline-block; vertical-align: middle; font-size: 20px; margin: 0 10px; } .service-support .right .text { float: left; width: 65%; color: #1a1a1a; font-size: 16px; line-height: 34px; } .service-faq { padding: 100px 0; overflow: hidden; } .service-faq .left { float: left; width: 25%; padding-right: 3%; overflow: hidden; position: relative; } .service-faq .left .title { padding-right: 10%; border-bottom: 1px solid #e6e6e6; } .service-faq .left .title h3 { font-size: 20px; } .service-faq .left .title .line { margin-top: 25px; position: relative; } .service-faq .left .title .line::after { content: ''; display: block; width: 80px; height: 4px; background: #00539c; position: absolute; left: 0; bottom: -1px; } .service-faq .left .leftnav { padding: 20px 0; overflow: hidden; border-bottom: 1px solid #e6e6e6; } .service-faq .left .leftnav a { display: block; font-weight: bold; font-size: 18px; color: #999999; padding: 15px 20px; } .service-faq .left .leftnav a.cur { background: #f7f7f7 url("../image/r21.png") 95% center no-repeat; } .service-faq .left .leftnav a:hover, .service-faq .left .leftnav a.cur { color: #000; } .service-faq .left .text { color: #666; font-size: 14px; line-height: 24px; padding: 20px 0; } .service-faq .right { float: left; width: 67%; padding-left: 3%; overflow: hidden; position: relative; } .service-faq .right::before { content: ''; display: block; width: 1px; height: 100%; background: #e6e6e6; position: absolute; left: 0; top: 0; } .faq-list { clear: both; margin-top: -1px; overflow: hidden; } .faq-list .title { padding: 25px 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; position: relative; cursor: pointer; overflow: hidden; } .faq-list .title h3 { float: left; margin: 0; font-size: 17px; color: #1a1a1a; font-weight: normal; } .faq-list .title i { width: 20px; height: 20px; display: block; position: absolute; right: 0; top: 50%; margin-top: -10px; background: url("../image/faq1.png") center no-repeat; } .faq-list .title.cur i { background: url("../image/faq2.png") center no-repeat; } .faq-list .title.cur h3 { color: #00539c; } .faq-list ul { padding: 0; overflow: hidden; font-size: 16px; line-height: 28px; color: #666666; } .faq-list ul.children { display: none; } .faq-list.cur ul.children { display: block; } /* contact */ .contact-section { padding: 120px 0; overflow: hidden; } .contact-section .title-style { text-align: center; } .contact-section .title-style h2 {} .contact-section .title-style .line { margin: 10px auto; } .contact-section .title-style .text { width: 50%; margin: 20px auto; font-size: 16px; color: #666; line-height: 26px; } .contact-section .content { overflow: hidden; padding: 50px 0 0 0; } .contact-section .content .left { width: 45%; } .contact-section .content .left .content-way { overflow: hidden; } .contact-section .content .left .content-way li { list-style: none; float: left; width: 33%; margin-bottom: 20px; position: relative; } .contact-section .content .left .content-way li::after { content: ''; display: block; width: 1px; height: 100%; background: #e7e8eb; position: absolute; right: 10%; top: 0; } .contact-section .content .left .content-way li:nth-child(3)::after, .contact-section .content .left .content-way li:last-child::after { display: none; } .contact-section .content .left .content-way li i { width: 38px; height: 38px; border: 2px solid #1a1a1a; border-radius: 100%; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 10px; opacity: .7; } .contact-section .content .left .content-way li:last-child { width: 99%; } .contact-section .content .left .content-way li i.c1 { background: url("../image/c1.png") center no-repeat; } .contact-section .content .left .content-way li i.c2 { background: url("../image/c2.png") center no-repeat; } .contact-section .content .left .content-way li i.c3 { background: url("../image/c3.png") center no-repeat; } .contact-section .content .left .content-way li i.c4 { background: url("../image/c4.png") center no-repeat; } .contact-section .content .left .content-way li span { display: inline-block; vertical-align: middle; } .contact-section .content .left .content-way li span h6 { font-size: 14px; color: #999999; font-weight: normal; margin: 0; } .contact-section .content .left .content-way li span h5 { font-size: 14px; color: #666; margin: 5px 0 0 0; } .contact-section .content .left .content-way li span h5 a { color: #666; } .contact-section .content .left .content-way li:nth-child(3) span h5 a { color: #00539c; } .contact-section .content .left .content-way li:nth-child(3) i { border: 2px solid #00539c; opacity: 1; } .contact-section .content .left .content-way li:nth-child(3) i.c3 { background: url("../image/c31.png") center no-repeat; } .contact-section .content .left .content-way li:hover span h5 { color: #00539c; } .contact-section .content .left .content-map { clear: both; margin-top: 10px; overflow: hidden; width: 100%; position: relative; background: #f1f1f1; } .contact-section .content .left .content-map #map { min-height: 205px; } .contact-section .content .left .content-map iframe { border: none; margin: 0; padding: 0; margin-top: -50px; } .contact-section .content .left .content-map iframe #watermark { display: none; } .contact-section .content .left .content-text { font-size: 12px; line-height: 20px; color: #999999; padding: 20px 0; } .contact-section .content .right { width: 47%; } .content-form { overflow: hidden; } .content-form li { list-style: none; margin: 0 0 10px 0; padding: 0; font-size: 0; } .content-form li .input2 { border: 1px solid #ededed; background: #f5f5f7; padding: 10px 20px; width: 50%; height: 60px; font-size: 14px; font-weight: normal; box-sizing: border-box; } .content-form li .input2:first-child { margin-right: 1%; width: 49%; } .content-form li .textarea1 { width: 100%; height: 130px; font-size: 14px; border: 1px solid #ededed; background: #f5f5f7; padding: 20px 20px; box-sizing: border-box; } .content-form li .submit1 { background: #00539c; color: #fff; font-size: 14px; width: 100%; height: 58px; cursor: pointer; } .content-form li .submit1:hover { background: #00539c; } .popup-window { background: rgba(0, 0, 0, .5); position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; display: none; } .popup-window-content { background: #fff; width: 800px; padding: 5% 2% 5% 5%; margin: auto; position: relative; z-index: 10; opacity: 0; transform: translate(0px, -100px); transition: all .4s; } .popup-window-content .rolling-content { overflow: auto; height: 500px; position: relative; } .popup-window-content .rolling-content .rolling-h { padding-right: 50px; font-size: 16px; color: #7d7d7d; line-height: 26px; } .popup-window-content .rolling-content .rolling-h h2 { color: #000; margin: 10px 0; text-transform: uppercase; font-size: 30px; } .popup-window-content-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .ani-show1 { display: block; opacity: 1; transform: translate(0px, 0px); transition-delay: .5s; } .video-window-content { width: 80%; height: auto; margin: auto; position: relative; z-index: 10; } .video-window-content video { width: 100%; height: auto; display: block; margin: auto; } .Contact-our-team { padding: 140px 0 140px 0; overflow: hidden; } .Contact-our-team .left { width: 45%; } .Contact-our-team .left .title-style h5 { color: #999; font-size: 16px; margin: 0; } .Contact-our-team .left .title-style h2 { margin: 0px 0 20px 0; } .Contact-our-team .left .text { font-size: 16px; line-height: 26px; color: #999999; padding: 20px 0; overflow: hidden; } .Contact-our-team .left .item2 { border-top: 1px solid #e6e6e7; border-bottom: 1px solid #e6e6e7; padding: 30px 0 20px 0; overflow: hidden; } .Contact-our-team .left .item2 li { width: 50%; float: left; list-style: none; } .Contact-our-team .left .item2 h3 { font-size: 14px; margin: 0; color: #999999; font-weight: normal; } .Contact-our-team .left .item2 h4 { font-size: 20px; margin: 5px 0; color: #1a1a1a; font-weight: normal; } .Contact-our-team .left .annotation { font-size: 12px; line-height: 20px; color: #999999; padding: 20px 0; overflow: hidden; } .Contact-our-team .right { width: 48%; } .contact-bottom { position: relative; overflow: hidden; } .contact-bottom .left { width: 50%; } .contact-bottom .left .map { overflow: hidden; position: relative; } .contact-bottom .left .map img { display: block; } .contact-bottom .left .map iframe { border: none; margin: 0; padding: 0; margin-top: -50px; } .contact-bottom .right { width: 35%; position: absolute; height: 100%; right: 10%; top: 0; } .contact-bottom .right .name { border-bottom: 4px solid #000; padding-bottom: 20px; } .contact-bottom .right .name h4 { font-size: 20px; color: #00539c; margin: 0; text-transform: uppercase; } .contact-bottom .right .name h2 { font-size: 40px; color: #1a1a1a; margin: 0; text-transform: uppercase; } .contact-bottom .right .content-way {} .contact-bottom .right .content-way .item { border-bottom: 1px solid #dcdcde; overflow: hidden; padding: 30px 0; } .contact-bottom .right .content-way .item.item2 li { float: left; width: 45%; margin-right: 5%; } .contact-bottom .right .content-way .item.item2 li::after { content: ''; display: block; width: 1px; height: 100%; background: #dedfe4; position: absolute; right: 10%; top: 0; } .contact-bottom .right .content-way .item.item2 li:last-child::after { display: none; } .contact-bottom .right .content-way .item.item2 li:last-child { width: 45%; margin-right: 0; } .contact-bottom .right .content-way .item.item2 li:first-child { width: 50%; } .contact-bottom .right .content-way li { list-style: none; position: relative; } .contact-bottom .right .content-way li i { width: 38px; height: 38px; border: 2px solid #1a1a1a; border-radius: 100%; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 10px; } .contact-bottom .right .content-way li i.c1 { background: url("../image/c4.png") center no-repeat; } .contact-bottom .right .content-way li i.c2 { background: url("../image/c1.png") center no-repeat; } .contact-bottom .right .content-way li i.c3 { background: url("../image/c2.png") center no-repeat; } .contact-bottom .right .content-way li i.c4 { background: url("../image/c3.png") center no-repeat; } .contact-bottom .right .content-way li span { display: inline-block; vertical-align: middle; } .contact-bottom .right .content-way li h6 { font-size: 14px; color: #999999; font-weight: normal; margin: 0; } .contact-bottom .right .content-way li h5 { font-size: 14px; color: #1a1a1a; margin: 5px 0 0 0; } .content-ewm { font-size: 14px; line-height: 28px; color: #999; padding-top: 30px; } /* fonts */ .title-style h1, .title-style h3, .title-style h2, .title-style h4, .screen-7 .swiper-right .swiper-text .item .title-1 h3, .swiper-tab-title h4, .screen-7 .swiper-right .swiper-text .item .title-1 h5, .screen-9 .upper-video .title-style h2, .screen-banner-swiper .screen-banner-slide .text h1, .our-project-swiper-3 .text h4, .product-range-list .item-2 .text h3, .screen-3 .upper .bottom .item .text h4, .screen-5 .upper .left .text h4, .screen-5 .upper .bottom .left li h2, .page-banner .text h2, .page-banner .text h5, .interesting-detail-title h1, .interesting-other h2, .Contact-our-team .left .email h3, .contact-bottom .right .name h2, .contact-bottom .right .name h4, .banner-slide .txt h1, .index-products-center .bottom3 a .text h2, .index-about .about-item .left .title h2, .index-interesting .title h2, .index-interesting-list a .text h2, .item-nav .left .ntitle h3, .item-nav .cnav li a h4, .screen-1 .title-style h5, .screen-12 .swiper-right .swiper-text .item .title-1 h3, .cd-nav a, .shownav-c ul li a, .shownav-c ul li h4, .about-ours .left .text .item h3, .core-competence .absolute .item3 .item h3, .banner-slide .txt h4, .screen-banner-swiper .screen-banner-slide .title h2, .page-banner .text h3, .Contact-our-team .left .item2 h4 a { font-family: 'Montserrat-Extra-Bold', Microsoft Yahei, Arial; } .screen-3 .right .text .serial-num, .header11 .content .right .language .icon, .evcharger-data .item li h2 strong, .evcharger-data .item li h2 span, .screen-1 .upper .item4 li h2, .screen-3 .left .item2 li h2 strong, .screen-3 .img .text *, .screen-7 .screen-7-swiper .spagination7 span, .index-about .about-item .right li h2 strong, .index-about .about-item .right li h2 span, .about-global .top .left .text .num h2 strong, .about-global .top .left .text .num h2 span, .swiper-history .swiper-history-time .year-num, .swiper-history .swiper-history-time .year-num span, .about-date .left .item h2 strong, .about-swiper-pic .swiper-slide .text .itemlist .item h4 strong, .screen-banner-swiper .screen-banner-slide .data5 li h3 strong, .evcharger-solution-banner .item4 a h2, .screen-1-2 .main .item3 li h3, .screen-1-3 .left .item3 a h3, .screen-2-2 .main .item3 li h3, .date3 li h3, .about-ours .left .text .item3 li h3, .date3 li h3 strong, .swiper-history .swiper-history-time .swiper-slide-active .year-num, .swiper-history .swiper-history-time .swiper-slide-active .year-num span, .swiper-pagination-num #current, .investors-date .left .ld2 span, .investors-date .right li h3 strong, .investors-date .right li h3 i, .service-support .left .text strong, .date3 li span, .jingdutiao8 .item h4 strong, .item-av6 h6, .datetxt3 li h4, .es-yuanquan-img .bgtext { font-family: 'Barlow-Bold', Microsoft Yahei, Arial; } .swiper-history .swiper-history-time .year-num, .swiper-history .swiper-history-time .year-num span, .swiper-pagination-num, .datetxt3 li h4 em { font-family: 'Barlow-Light', Microsoft Yahei, Arial; } .screen-7 .swiper-right .swiper-text .item .text strong, .screen-7 .swiper-right .swiper-text .item .text h2, .swiper-button-bottom .snext8 h6, .swiper-button-bottom .sprev8 h6, .swiper-button-bottom .swiper-pagination.spagination8 span, .swiper-button-bottom .swiper-pagination.spagination8, .contact-section .content .left .content-way li span h5, .popup-window-content .rolling-content .rolling-h h2, .header11 .content .center .nav li a, input, textarea, .screen-3 .img .text h3 p, .screen-5 .upper .bottom .left li h4, .interesting-detail-turnpage a span, .download-list a .text h3, .Contact-our-team .left .email h1, .screen-12 .swiper-right .swiper-text .item .text strong, .about-date .left .item h3, .about-date .left .item h3 strong, .about-date .right .item h4 strong, .index-products-center .bottom5 .text h4, .evcharger-advantage .item4 a .text h5, .evcharger-solution-banner .item4 a h5, .pic-animation .item h5, .detail-template .title h2, .table-parameter-nav a, .product-range-list .item .text h3, .global-product-certification .gpc-content-btn a, .global-product-certification-iconbtn .gpc-content-btn a, .global-product-certification-iconbtn .content-btn a { font-family: 'Montserrat-Bold', Microsoft Yahei, Arial; } .title-style h5, .view-btn h5, .screen-2 .top .right .text, .screen-2 .top .right .faq-btn h6, .screen-3 .left .text, .screen-3 .right .text .txt1, .header11 .content .right .search .search-input, .footer11 .content .center .left .subscribe input::-webkit-input-placeholder, .footer11 .content .center .left .subscribe .subscribe-submit, .page-path a, .download-list a .text h5 span, .download-list-bottom a .text h5 span, .page-banner .text h6, .index-products-center .bottom3 a .text h6 span, .index-about .about-item .left .play span, .index-about .about-item .right li h6, .screen8-swiper-img .section-item .item a h4 strong, .about-date .left .item h4, .battery-advantage .title h4, .amc-item4 .item .text h6 { font-family: 'Montserrat-Light', Microsoft Yahei, Arial; font-weight: normal; } .item-av6 h3, .table-parameter-nav a, .download-list-nav a, .item-nav .right-nav ul li ul li a h5 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .item-av6 h5 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .amc-item8 .item .text h5 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /*.inside-pages .header11 .logo2{*/ /* display: none;*/ /*}*/ /*.inside-pages .header11:hover .logo2{*/ /* display: block;*/ /*}*/ .header11 .content .left .logo11 { display: none; } .inside-pages .header11:hover .logo11 { display: block; } .inside-pages .header11:hover .logo2 { display: none; } .inside-pages .scroll-top .content .left .logo11 { display: block; } .inside-pages .scroll-top .content .left .logo2 { display: none; } .inside-pages .scroll-down .content .left .logo11 { display: block; } .inside-pages .scroll-down .content .left .logo2 { display: none; } .header11 .content .left .logo2 { width: 230px; height: 230px; position: absolute; left: 0; top: 41%; margin-top: -12.5px; } .copyt { float: right; } .copyt a { color: #666; } .social img { width: 35%; margin: 0px 11px; } .page-num-current { background: #00539c; border: 1px solid #00539c; color: #fff !important; } .page-num { color: #000 !important; /* font-size: 16px !important; */ } .RighInfo001277 .list li.on figure { border: 2px solid #016fba; } .interesting-list a .txt { background: #f1f1f1; width: 100%; } .interesting-list .lino { width: 100%; background: white; } .screen-banner-bottom-nav.num3 .two { color: white; width: 50%; } .sear { margin: top 0 !important; margin-bottom: 4%; } .bottom .copy div { float: left; margin-right: 1%; margin: .5% 1% 1%; } /* .list .bd .tempWrap{height: 240px !important;} */ .screen-banner-bottom .down { width: 20%; } .screen-banner-bottom-nav.num3 .load { width: 100%; } .download-list .com-img { margin-bottom: 1%; display: block; position: relative; overflow: hidden; float: left; width: 24%; margin-right: 1%; } #main .screen-banner-bottom-nav .hj { width: 33%; } .item-nav .right-nav ul .pro { list-style: none; width: 40% !important; padding: 0 10px; float: left; } .item-nav .right-nav ul .pro a { width: 80%; } .screen-banner-swiper .screen-banner-slide .tit { padding-bottom: 150px; } .big_img ul li p { position: absolute; left: 0; bottom: 0; width: 100%; color: black; text-align: center; font-size: 20px; font-weight: 600; } .tempWrap ul li p { display: none; } .ind-bm { margin: 3% 0 2% 0; } .pro-pro { padding-top: 50px !important; padding-bottom: 35px !important; background: #f9f9f9 !important; } .ind-pro { padding-top: 85px !important; } .ind-bm a{color:white;} .ind-bm a:hover{color:#289aff;} .screen-banner-bottom-nav .pronav {width:25% !important;height: 85px; line-height:80px} .screen-banner-swiper .screen-banner-slide .protit{top:-15%;} .product li {list-style: none;} @media screen and (max-width: 500px) {.social img { width: 35%; margin: 0px 25px 50px 25px; }} @media screen and (max-width: 400px) {.social img { width: 35%; margin: 0px 18px 50px 25px; }}